如何将值传递给组件？

Question

我有这个组件：

export class MyComponent {
    @Input() active:boolean;

    constructor() {
        console.log(this.active);
    }
}

您会注意到我已声明我传递的Input：

<mycomponent
    [active]="1 == 1"></mycomponent>

加载时，构造函数中的log语句记录undefined。我做错了什么？

Answer 1

@Input属性绑定首先仅在ngOnInit之后可用，

所以你应该这样做：

export class MyComponent {
    @Input() active:boolean; 

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

另外，仅供参考：

来自文档：

  

ngOnInit   在 Angular首先显示数据绑定属性之后初始化指令/组件，并设置指令/组件的输入属性。   在第一次ngOnChanges之后调用一次。

更多关于Life Cycle Hooks

Answer 2

以下是如何在HTML模板中使用this.active的示例：

 <div *ngIf='active'>
   <span   [ngClass]="{'glyphicon-play': active}">
 <div>