Angular 2，将 id 传递给组件

Question

我很惊讶仅仅将一个 id 传递给一个组件是多么困难。我确定我遗漏了一些东西，但基本上我想做的就是能够将 id 传递给嵌套组件。我有一个父容器，我的 View 由这个组成，我想用 groupID = 6 实例化“ Assets ”组件:

template: `
    <div class='another_page'></div>
    <asset-manager [groupId]="6"></asset-manager>
     <div class='another_page'></div>
    `

我一定已经根据 Internet 上的各种文档尝试了六种方法，但都无济于事。这是从实际的 AssetManager 组件中截取的内容

export class AssetManager implements AfterViewInit, OnDestroy {
@Input() groupId: string;
...
 constructor( ) {
    **this.groupID is always undefined**

}

有这么难吗？谢谢!

Answer 1

问题是 Angular 2 生命周期的问题，根据"new"lifecycle hooks documentation，它按以下顺序发生和 this older cheatsheet .

constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

构造函数将始终在输入可用之前被调用。如果您尝试从构造函数访问输入属性，该值将始终未定义。

第一次处理输入属性是在 ngOnChanges 期间你可以把你的逻辑移到那里，尽管模板的内容和 subview 还没有被处理。但是，这里的问题是每次输入属性更改时都会调用它，如果您想设置一次，这可能是不可取的。

ngOnChanges() {
    console.log(this.groupId);
}

此问题的常见解决方案是将输入相关逻辑移至 ngOnInit ，因为它是在输入属性初始化之后和 ngOnChanges 之后调用的已运行。

ngOnInit() {
    console.log(this.groupId);
}

一旦您移动了 this.groupId 的支票至 ngOnInit ，输入属性将被适当水合。

查看此 plunker .构造函数将始终返回 undefined并且 ngOnInit Hook 正确返回 6 .

关于评论中的讨论，我想修改一下我原来的理解。输入属性在呈现内容之前确实可用，因为那发生在 ngOnInit 之后和之前 ngAfterContentInit ，根据备忘单和新的生命周期 Hook 文档:

Called after ngOnInit when the component's or directive's content has been initialized.