Lifecycle.tick 递归调用

Question

我正在尝试让一个组件代表一个项目模型。此组件获取项目然后显示它。我正在尝试让子组件获取项目的其他一些属性并显示它们。不幸的是，这导致 Lifecycle.tick() 被递归调用。

举个例子：

@Component{selector: 'comp2', properties: ['item']}
@View{template: '<ul *ng-if="fetchedAttributes != null"><li *ng-for="#attribute of fetchedAttributes"> {{ attribute.name }} </li></ul>',
      directives: [NgIf, NgFor]}
export class Comp2 implements OnInit {
   fetchedAttributes: null;
   item: Item;

   onInit() {
     this.fetchAttributesPromise(this.item)
      .then((attributes)=>{this.fetchedAttribues = attributes;});
   }
}

@Component{selector: 'comp1'}
@View{template: '<comp2 *ng-if="fetchedItem != null" [item]="fetchedItem"></comp2>',
      directives: [Comp2, NgIf]}
export class Comp1 {
  fetchedItem: Item;
  constructor() {
     this.doFetchItem();
  }

  doFetchItem() {
    this.doFetchPromise()
    .then((item)=>{this.fetchedItem = item;});
  }
}

Comp1 获取项目。获取结果时，将创建一个新的 Comp2 实例，它的 item 属性绑定到获取的项目实例，并调用它的 onInit 挂钩。这又会创建另一个请求来获取项目属性，从而导致异常：

EXCEPTION: LifeCycle.tick is called recursively
Error: LifeCycle.tick is called recursively
    at new BaseException (angular2.js:4688)
    at execute.LifeCycle.tick (angular2.js:8741)
    at angular2.js:8736
    at Zone.run (zone.js?v=0.0.0:113)
    at Zone.execute.$__5._createInnerZone.zone.fork.fork.$run [as run] (angular2.js:9041)
    at XMLHttpRequest.zoneBoundFn (zone.js?v=0.0.0:86)

如何在没有运行的情况下跨多个组件级联请求？

Answer 1

解决方案是使用一个服务来执行所有请求。如果在视图绑定中注入，您可以拥有一个视图范围的服务实例：

@Component({
//...
bindings: ['MyViewScopedService']
})

在这种情况下，该服务将对所有视图子项可用。

或者你可以有一个应用范围的服务实例，如果你绑定它引导您的应用程序：

bootstrap(App, [
    MyAppScopedService,
    //...
]);

要使用它，请将其注入您的构造函数中：

class ServiceConsumer {
 constructor(myService: MyViewScopedService) {
 }
}

然后在您的服务中级联请求。

Lifecycle.tick 递归调用

Lifecycle.tick called recursively

angular