Question

我正在尝试使用表示项目模型的组件。这些权限取出该项目然后显示它。我正在尝试使用childeren组件来获取项目的其他属性并显示它们。不幸的是，这会导致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递归调用

1 个答案: