Angular 2隐藏或显示子组件

Question

我有一个“父”组件，其模板包含其他两个组件。我想以某种方式显示或隐藏任一组件。我看了multiple component angular.io tutorial试图弄清楚这一点，但没有发生任何事情(并且没有出现控制台错误)。

我的“父”组件及其模板是:

@Component({
    selector: 'main-area',
    templateUrl: 'main-area.html',
    directives: [Child1Component, Child2Component]
})
export class MainComponent {
        child1Shown:boolean = true;
        child2Shown:boolean = false;
}

主区域.html -

<div>
    <childOne [hidden]="child1Shown"></childOne>
    <childTwo [hidden]="child2Shown"></childTwo>
</div>

我的子组件每个都有一个模板，但其中的代码如下。

子1:

@Component({
    selector:'childOne',
    templateUrl: 'childOne.html'     
})    

export class Child1Component { 
   @Input() hidden:boolean;
}

child 2:

@Component({
    selector: 'childTwo',
    templateUrl: 'childTwo.html'
})

export class Child2Component {
        @Input() hidden:boolean;
}

当页面加载其 MainComponent 时，child2 应隐藏(及其模板)，而 child1 应显示(及其模板)。然而两者都正在被展示。我尝试在 MainComponent 上使用 (click)=setHidden() 函数创建一个按钮来更改 MainComponent 属性，但没有任何反应。在组件间通信方面我缺少什么？

Answer 1

hidden 是默认属性。添加具有相同名称的输入似乎可以防止默认行为。注释掉输入使 hidden 起作用:

export class Child2Component {
    // @Input() hidden:boolean;
}

Plunker