Question

问题：

  <div class="appContainer">
    <my-cube-container></my-cube-container>
    <my-toolbox></my-toolbox>
  </div>

my-toolbox在其构造函数中调用服务。 service A调用另一个service B并将值设置为该服务。 my-cube-container在其构造函数中调用service B。当my-cube-container调用service B时，值不会被初始化。

可能的解决方案？：

使用生命周期钩子：如果在onNgInit（）中调用了一个服务，它将在组件构造函数中使用的任何其他服务之后调用。然而，这感觉有点不对，并不明确。
告诉角度组件是否依赖于另一个组件。我认为这更明确，我想这样做。

Answer 1

你有几个选项，按照它们的方式保存，但是将所有对服务的调用移到ngInit()所有逻辑应该在该方法内，而不是在构造函数中。这将使你的生活在测试方面更加困难。之后，您可以为service B上的值创建一个observable，并使<my-cube-container></my-cube-container>订阅该observable，以便在这些值可用时收到通知。

另一种选择是创建一个新组件来包装这两个组件。因此，此组件将负责将数据提供给<my-cube-container>和<my-toolbox>，并且看起来像这样：

<my-wrapper>
  <my-cube-container [values]="serviceBValues"></my-cube-container>
  <my-toolbox (setValues)="setValues($event)"></my-toolbox>
</my-wrapper>

ts代码将是这样的：

import {Component} from 'angular2/core';

@Component({
  selector: 'my-wrapper',
  template: `
    <my-wrapper>
      <my-cube-container [values]="serviceBValues"></my-cube-container>
      <my-toolbox (setValues)="setValues($event)"></my-toolbox>
    </my-wrapper>
  `
})
export class MyWrapperComponent {
  public serviceBValues;

  constructor(private serviceA: ServiceB, private serviceB: ServiceB)

  setValues(event) {
    console.log(event);
    this.serviceA(event);
    this.serviceBValues = this.serviceB.getValues(); // I guess they will be available by now, if not use promises or observables
  }
}

因此<my-wrapper>将负责所有逻辑，而您的实际组件将是更多只显示您的数据的虚拟组件。

组件依赖性＆amp;使用生命周期钩子作为逻辑

1 个答案: