angular - 如何让组件在angular2中检测到它的隐藏状态？

Question

我有两个组件，子组件的显示状态由父组件控制。如何让 child 知道它的 parent 被改变了隐藏属性？

// Parnet
@Component(selector: '[component-parent]',
    templateUrl: 'component-parent.html')
class ComponentParent {
    bool enableChild;
}

<div>
    <div component-child [hidden]="enableChild"></div>
</div>

// Child
@Component(selector: '[component-child]',
    templateUrl: 'component-child.html')
class ComponentChild {
    // How child aware not it is not hidden anymore?
}

Answer 1

该组件需要一个 @Input()具有匹配名称以支持 [xxx]="..."捆绑:

@Component(selector: '[component-child]',
    templateUrl: 'component-child.html')
class ComponentChild {
  @Input()
  set hidden(bool val) {
    print(val);
  }
}