Question

如何捕获子组件控制器类中的@Input（）参数。我尝试从Constructor和OnInit生命周期事件控制日志，但它是未定义的。但是id通过单向绑定

正确显示在子组件html上

我需要参数info在我的子组件中编写一些自定义逻辑。

parent.component.ts

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
    parameter : any = [1 ,2, 3] ; 
}

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
    @Input() parameter : any ; 
    Constructor() {
        console.log(this.parameter) // prints undefined
    }
    ngOnInit() {
        console.log(this.parameter) // prints undefined
    }
}

parent.component.html

<app-child [parameter]='parameter' ></app-child>

child.component.html

{{ parameter }} // prints [1 ,2, 3]

Answer 1

如果您在代码的这个内容中看到，您将看到只有constructor输出未定义且ngOnInit输出数组[1, 2, 3]

这是一个有效的工作人员https://embed.plnkr.co/szRxO7b94r1o15vLbLbl/

评论更新 plunker现在使用服务和测试API，它在父和子上工作正常。使用ngOnChanges，这样您就可以在返回后使用响应。您应该在他的回答中阅读@ {GünterZöchbauer提到的lifecycle hooks。

Answer 2

执行构造函数时，

@Input()尚未设置。

当更改检测运行并且调用@Input() s ngOnChanges()更新时。

第一次调用ngOnChanges()后，调用ngOnInit()。

有关生命周期方法的更多详细信息，请参阅https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Answer 3

正如人们之前所说，你应该在ngOnInit（）

中获取参数值

还有两个细节：你不需要使用＆＃39;实现OnInit＆＃39;并且写'＆＃39;构造（）＆＃39;使用小＆＃39; c＆＃39;开头的信。

如何捕获子组件控制器类中的@input参数

3 个答案: