Question

在我的组件模板中，我有一堆子组件。一开始，我想对其中一个执行命令。如图所示提取对它们的引用，包括我尝试与它们交谈的不同步骤。

@ViewChildren(SubComponent) subs: QueryList<SubComponent>;

constructor(...) { console.log("constructed " + this.subs); }
ngOnInit()       { console.log("inited      " + this.subs); }

ngAfterContentInit()    { console.log("content init    " + this.subs); }
ngAfterContentChecked() { console.log("content checked " + this.subs); }
ngAfterViewInit()       { console.log("view init       " + this.subs.length); }
ngAfterViewChecked()    { console.log("view checked"     + this.subs.length); }

我面临的问题是，我在每次通话中都没有得到任何或零（第一次运行）。最后，在ngXxxChecked()来自git svn dcommit之后，我会得到结果并对其作出反应。

然而，反应应该只发生第一次潜艇。上面的方法将执行每次用户与页面交互。

一种解决方案是为操作设置超时。这是一个非常丑陋的黑客，好的程序员会下地狱。另一个我能想到的是设置一个标志，只有在未设置的情况下才执行我的操作。这是一个丑陋的黑客（我们不是在说地狱，而是炼狱）。

如果我想去天堂，源代码可以自由漫游而虫子自杀，我该怎么办？

Answer 1

我的解决方案是让子组件公开在ngOnInit内发出自己实例的事件。然后，父组件可以监听该事件并在其可用时抓取该实例。这是一些基本代码：

次要组分的

export class SubComponent implements OnInit{
  @Input() name:string;
  @Output() init = new EventEmitter<SubComponent>();

  ngOnInit(){
    this.init.emit(this);
    this.init.complete();
  }
}

ParentComponent 模板

<sub-cmp *ngFor="let d of data" [name]="d" (init)="onSubInit($event)"></sub-cmp>

ParentComponent 类：

onSubInit(sub:SubComponent){
  console.log(sub);
}

现在，在父级的onSubInit内，您可以使用子组件的实例来执行任何操作。

Live demo

See the docs.

在生命周期中是子组件的初始化钩子＆＃39;在Angular创作？

1 个答案: