Ändern Sie das Direktivenattribut von der untergeordneten Komponente in Angular 2

Question

Ich habe eine übergeordnete Komponente mit der folgenden Direktive <child-component [hidden]="!visible"></child-component>. Zu Beginn ist die untergeordnete Komponente, die dieser Direktive zugeordnet ist, ausgeblendet und nach einem Ereignis möchte ich sie sichtbar machen. Daher verwende ich eine Schaltfläche <button (click)="showMe()">Show child</button> in der übergeordneten Komponente, um diese Eigenschaft zu ändern.

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

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

Das Problem ist, dass, sobald diese das Kind Komponente zeigt, ich brauche einen Knopf in der Kind-Komponente zur Verfügung zu stellen, es zu verbergen wieder:

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

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

Ich bin nicht sicher über diesen Teil aber zumindest funktioniert es. Nun, was passiert, wenn ich die Eigenschaft hidden der Direktive erneut ändern möchte? Der Aufruf von showMe() funktioniert nicht, vermutlich aufgrund einer Art von Vorrang in den angewendeten Stilen.

Was ist der richtige Weg, dies zu tun?

Demo: Klicken Sie zuerst auf "Show child", dann auf "Hide" und dann erneut auf "Show child". Der zuletzt angeklickte Button funktioniert nicht.

Dank

Answer 1

nicht sicher, dies ist der Ansatz, den Sie wollen, aber ich denke, es ist wie beschrieben verhält:

@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; 
} 

in Ihrem

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

Plunker example

Das Problem Beispiel ist, dass die hidden Eigenschaft und visibility: hidden erhalten widersprüchliche Werte.