子コンポーネントから角2のディレクティブ属性を変更します

Question

私は次のディレクティブ<child-component [hidden]="!visible"></child-component>を持つ親コンポーネントを持っています。当初、このディレクティブに関連付けられている子コンポーネントは非表示になっていて、イベントが発生した後に表示させたいので、親コンポーネントのボタン<button (click)="showMe()">Show child</button>を使用してこのプロパティを変更しています。

export class ChildComponent { 
    constructor(private _element: ElementRef, private _renderer: Renderer) {} 

    hideMe() { 
    let el = this._element.nativeElement); 
    this._renderer.setElementStyle(el, 'visibility', 'hidden'); 
    } 
} 

私はこの部分についてはよく分からない：

export class App { 
    constructor() { 
    this.visible = false; 
    } 

    showMe() { 
    this.visible = true; 
    } 
} 

問題は、これは子コンポーネントを示していたら、私は再びそれを隠すために、子コンポーネントにボタンを提供する必要がある、ということです少なくともそれは動作します。今、child-component指示のプロパティhiddenを再度変更したい場合はどうなりますか？ showMe（）を呼び出すことは機能しません。おそらく、適用されるスタイルの何らかの優先順位のためです。

これを行う正しい方法は何ですか？

Demo：最初に「子を表示」をクリックし、次に「隠す」をクリックしてから「子を表示」をもう一度クリックしてみてください。クリックされた最後のボタンは機能しません。

おかげ

Answer 1

ない、これはあなたが望むアプローチですが、私が説明したように、それは振る舞いだと思うことを確認：

@Component({ 
    selector: 'child-component', 
    providers: [], 
    host: {'[hidden]': 'hidden'}, 
    template: ` 
    <div> 
     This is the child 
    </div> 
    <button (click)="hidden=true">Hide</button> 
    `, 
}) 
export class ChildComponent { 
    @Input() hidden:boolean = false; 
} 

<child-component #child [hidden]="true"></child-component> 
    <button (click)="child.hidden=false">Show child</button> 

Plunker example

あなたの問題点たとえば、hiddenプロパティとvisibility: hiddenは競合する値を取得します。