从不同的组件更改变量值 - Angular 4答案

【问题标题】：Change variable value from different component - Angular 4从不同的组件更改变量值 - Angular 4
【发布时间】：2018-11-07 07:34:34
【问题描述】：

我有两个组件，一个是home.component，一个是loading.component（加载屏幕）。载入画面有倒计时，倒计时之后，他做点什么。我需要做的是使加载屏幕能够自定义倒计时长度。我尝试使用 EventEmiter，但它不起作用。

home.component.html：

<a (click)="applyChanges()" class="green" style="margin-left: 8px; cursor: pointer"><i style="margin-right: 5px;"class="fa fa-check"></i>Apply changes now</a>

home.component.ts

@Output() loadingScreenStart: EventEmitter<any> = new EventEmitter();


applyChanges(){
this.dashboard.applyChanges().catch(
  err => {
    console.log("There was an error: "+err.status);
    console.log("There was an error: "+err.statusText);
    //this.handleError(err);
    return Observable.throw(err);
  }
)
.subscribe(
  data => {
    this.loadingScreenStart.emit(34);
    this.router.navigate(['/loading']);
  }
);

} loading.component.html

<div class="container container-table" (loadingScreenStarted)="onScreenStart($event)">
  <div class="row vertical-10p">
    <div class="container">
      <img src="../../assets/img/LoginLogo.png" class="center-block logo">
      <img style="width: 15em"  src="../../assets/img/gears.svg" class="center-block ">
      <div class="text-center col-sm-6 col-sm-offset-3">
        <h1>Changes are taking place</h1>
        <h4>You will be redirected in {{timeLeft}} seconds</h4>
      </div>
    </div>
  </div>

loading.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { AuthGuard } from '../guard/auth.guard';
import { Title } from '@angular/platform-browser';
@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.css']
})
export class LoadingComponent implements OnInit {
   public timeLeft;
   public intervalId;
   constructor(public titleService: Title, public guard: AuthGuard) { }
   onScreenStart(length) {
      this.timeLeft = length;
      console.log(length);
   }
   ngOnInit() {
      this.titleService.setTitle("Loading... | something);
      this.startCounter();
      localStorage.removeItem('statusInfo');
   }
   startCounter() {
      this.intervalId = setInterval(() => {
         if (this.timeLeft == 1) {
            clearInterval(this.interValId);
         }
         this.timeLeft--;
      }, 1000)
   }
}

【问题讨论】：

标签： html angular eventemitter

【解决方案1】：

由于这两个组件不是父/子关系，我认为您无法成功使用 EventEmitter。主要问题是您不能同时依赖这两个组件。

因此，对于您的情况，两种常见的选择是：

在路由参数中传递数据（例如https://angular.io/tutorial/toh-pt5#navigating-to-hero-details）
通过共享服务进行通信（例如https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service）

【讨论】：

谢谢。路由参数解决了这个问题。正是我需要的。

【解决方案2】：

你的代码有两处错误。

了解 EventEmitter 的工作原理。

当您使用 eventEmitter 从子组件发出值时，您需要将其映射到父组件的某个方法。

// in child component.
    @Output()
    myEmitter   = new EventEmitter();

    someMethod() {
     this.myemitter.emit('somevalue');
}

现在它实际上接收到这个发射器的值，你需要将它映射到父组件的方法。

  someParentMethod(value) {
      console.log(value);
  }

<app-child (myEmitter)="someParentMethod(event)"></app-child>

2。 Observable 的错误处理。由于您抛出了一个 Observable，因此您需要在订阅中处理它。 Observable 的订阅由 3 个部分组成。响应、错误处理、下一步。现在，您从 Observable.throw 抛出一个错误，您的 res 部分将不会运行。但是你没有处理错误，所以你什么也看不到。而是这样做：

.subscribe(
  data => {
    this.loadingScreenStart.emit(34);
    this.router.navigate(['/loading']);
  },
  error => console.log(error)
);

【讨论】：