angular2変更はない仕事

Question

親コンポーネントクラス

export class Parent { 
    show: boolean = false; 
    constructor() { } 
    showChild() { 
     this.show = true; 
    } 
} 

親コンポーネントテンプレート

<child [isShow]="show"></child> 

子コンポーネントクラス

export class Child { 
    @Input isShow: boolean = false; 
    constructor() { } 
    onClick() { 
     this.isShow = false; 
    } 
} 

子コンポーネントのonClick（）をトリガーした後、showChild（）は子コンポーネントを表示するようには機能しません。

なぜですか？

Answer 1

大括弧を使用しているため、この値は親から子に排他的に渡されています。

値が両方向に移動するには、双方向データバインディングを使用する必要があります。結合双方向のデータを見てみましょう

@Input() isShow: boolean; 
@Output() isShowChange = new EventEmitter<boolean>(); 

テンプレートが

<child [(isShow)]="show"></child> 

または

<child [isShow]="show" (isShowChange)="show = $event"></child> 

する必要があります：あなたのisShow属性はようにする必要があります意味

チュートリアルページ： https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way

Answer 2

子と親の間で同期が取れていない値を作成しています。親は値を子に渡すので、親の値だけを変更する必要があります。子から親に値を送信するには、OutputパラメータをEventEmitterとして使用する必要があります。それは次のようになります。子でonClickメソッドを実行すると

export class Parent { 
    show: boolean = false; 
    constructor() { } 
    showChild() { 
     this.show = true; 
    } 
} 

<child [isShow]="show" (updateValue)="show = $event"></child> 



export class Child { 
    @Input isShow: boolean = false; 
    @Output() updateValue = new EventEmitter(); 

    constructor() { } 
    onClick() { 
     this.updateValue.emit(false); 
    } 
} 

これは値falseを発します。親はその新しい値を受け取り、それを子コンポーネントに送信される変数showに割り当てます。

Answer 3

双方向データバインディング構文を使用できるように、値としてgetterとsetterを使用する必要があります。

export class Child { 
    private isShowValue = false; 

    @Input() 
    public get isShow(){ 
     return this.isShowValue; 
    } 

    @Output() isShowChange = new EventEmitter(); 

    set isShow(val) { 
     this.isShowValue = val; 
     this.isShowChange.emit(this.isShowValue); 
    } 

    constructor() { } 

    onClick() { 
     this.isShow = false; 
    } 
}