angle 2子コンポーネントを非表示または表示する

Question

私は、テンプレートに2つの他のコンポーネントが含まれている「親」コンポーネントを持っています。何らかの形でどちらかのコンポーネントを表示したり隠したりしたい。私は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; 
} 

メインarea.html -

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

私の子コンポーネントは、それぞれのテンプレートを持っていますが、ここのコードがどのように見えるかですそれら。 （それはテンプレートだと）に示す

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

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

（それはテンプレートだと）それは MainComponent child2のだとページがロードが隠されるべき

とchild1の：

CHILD1：

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

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

CHILD2。しかし、両方が表示されています。私は、MainComponentプロパティを変更するためにMainComponentに(click)=setHidden()関数を持つボタンを作成しようとしましたが、何も起こりません。コンポーネント間の通信については何が欠けていますか？

Answer 1

hiddenは、デフォルトのプロパティです。同じ名前の入力を追加すると、デフォルトの動作が妨げられるようです。入力をコメントアウトしてhidden作業を行います

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

Plunker

Answer 2

受け入れ答えは結構ですが、あなたは当初Angular4に記載されたコードを使用している場合、あなたはエラーになりますので、directivesが廃止されました。

限り、子コンポーネントがモジュールで@NgModule内で宣言されているとして、彼らはもはや