@Input不工作Angular 2

Question

我在设置Input属性时遇到问题。我想要做的是传递app.component.ts中的值passBool并设置属性的下一个组件称为receivedBool。

这里是我的代码：

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <nextComponent [receivedBool]="passBool"></nextComponent> 
    ` 
}) 

export class AppComponent { 

    //Variables 
    passBool: Boolean = true; 

    constructor(){ 
    console.log('The boolean value we are trying to pass is: ' + this.passBool) 
    } 

} 

nextComponent.component.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'nextComponent', 
    template: `<i> </i> ` 
}) 

export class NextComponent { 

    @Input() receivedBool: Boolean = false; 

    constructor() { 
     console.log('The boolen value we are receiving here is: ' + this.receivedBool) 
    } 

} 

控制台日志的结果是：

The boolean value we are trying to pass is: true - app.component.ts

The boolean value we are receiving here is: false - nextComponent.component.ts

我希望你能赐教。谢谢！

Answer 1

执行构造函数时输入还不可用。

使用ngOnInit()代替：

export class NextComponent { 
    @Input() receivedBool: Boolean = false; 

    ngOnInit() { 
     console.log('The boolen value we are receiving here is: ' + this.receivedBool) 
    } 
}