Angular 2，将id传递给组件

Question

我很惊讶将id传递给组件是多么困难。我确定我错过了一些东西，但基本上我想做的就是能够将id传递给嵌套组件。 我有一个父容器，我的视图由此组成，我想实例化资产＆＃39; groupID = 6的组件：

Select ID from file1, file2 where file1.id = file2.id (will yeild 
multiple items) into an array var called $emailList = array();

我必须尝试基于互联网上的各种文档的六种方法无济于事。 这是来自实际AssetManager组件的剪切

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

难道这难吗？谢谢！

Answer 1

问题是角度2生命周期的问题，按照以下顺序发生，根据＆＃34; new＆＃34; lifecycle hooks documentation和this older cheatsheet。

constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy

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

第一次处理输入属性是在ngOnChanges期间，您可以将逻辑移到那里，尽管模板和子视图的内容尚未处理。但是，这里的问题是每次输入属性改变时都会调用它，如果你想设置一次，这可能是不合需要的。

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

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

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

将this.groupId的支票移至ngOnInit后，输入属性将正确保存。

见plunker。构造函数将始终返回undefined并且ngOnInit挂钩正确返回6。

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

  

当组件或指令的内容具有时，在ngOnInit之后调用   已初始化。

Answer 2

你应该用这个：

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

或

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

使用[...]，您尝试评估表达式。在您的情况下，表达式为6，但这与某些内容不对应，因此未定义。

修改

根据Mark的评论，实际问题是构造函数中的值不可用（未定义），但是会在ngOnInit挂钩...