Изменить атрибут директивы от дочернего компонента в Angular 2

Question

У меня есть родительский компонент со следующей директивой <child-component [hidden]="!visible"></child-component>. Первоначально дочерний компонент, связанный с этой директивой, скрыт, и после некоторого события я хочу сделать его видимым, поэтому я использую кнопку <button (click)="showMe()">Show child</button> в родительском компоненте, чтобы изменить это свойство.

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

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

Проблема заключается в том, что после того, как это показывает компонент ребенка, необходимо предоставить кнопку в компоненте ребенка, чтобы скрыть его снова:

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

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

Я не уверен, что в этой части но, по крайней мере, это работает. Теперь, что произойдет, если я хочу снова изменить свойство hidden директивы child-component? Вызов 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 получить противоречивые значения.