我有一个奇怪的行为 @ViewChildren 对应于 ngFor 生成的子组件。 @ViewChildren 查询没有看到元素在数组中停留了很长时间。我所有的代码都在Plunker- 打开控制台后查看。
这是我的主要组成部分:
@Component({
selector: 'my-app',
template: `
<button (click)="addInternalComponent()">Add internal component</button>
<app-internal #internals *ngFor="let i of indexes" [index]="i
(afterViewInit)="onAfterViewInit()"></app-internal>
`,
})
export class App {
@ViewChildren('internals') internals: QueryList<InternalComponent>;
indexes = [];
addInternalComponent() {
console.log('adding internal component!');
this.indexes.push(this.indexes.length);
console.log('Not complete list', this.internals._results);
}
onAfterViewInit() {
console.log('onAfterViewInit - still not complete list', this.internals._results);
}
}
我们可以通过单击按钮添加其中的子组件。
在将一个元素添加到索引数组中以生成 ngFor 循环中的所有子元素之后 - 我们没有刚刚添加的那个元素。
我可以理解这种行为 - 因为也许子组件需要一些时间来创建它,并且引擎决定在创建完整的子组件之前控制台日志。
但是,我在子组件中创建了发射器,表示子组件的视图和模型都已初始化。但是......在父组件中处理这个事件 - 我们仍然没有这个项目。这怎么可能?
子组件:
export class InternalComponent implements AfterViewInit {
@Input()
index;
@Output()
afterViewInit: EventEmitter<any> = new EventEmitter<any>();
ngAfterViewInit() {
this.afterViewInit.emit();
}
}
通知内容的标准方式QueryList
已经改变的是订阅它的changes
事件在ngAfterViewInit
:
@ViewChildren("internals") internals: QueryList<InternalComponent>;
ngAfterViewInit() {
this.internals.changes.subscribe((list: QueryList<InternalComponent>) => {
// The updated QueryList is available here (with list or with this.internals)
this.doSomethingWithInternals(list);
this.doSomethingWithNewInternal(list.last);
...
});
}
上面的事件处理可能就是您所需要的。如果您仍想实施afterViewInit
事件在InternalComponent
,您可以传递对组件的引用作为事件的参数:
export class InternalComponent implements AfterViewInit {
@Output() afterViewInit = new EventEmitter<InternalComponent>();
ngAfterViewInit() {
this.afterViewInit.emit(this);
}
}
并在事件处理程序中检索组件:
(afterViewInit)="onAfterViewInit($event)"
onAfterViewInit(component: InternalComponent) {
this.useNewInternalComponent(component);
...
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)