2017-09-13 15 views
0

私は角度4を使用しています。トグル時にビュー内で変更されない保護された変数を持つ基本クラスがあります。それがイベントを伝播するためには何をする必要がありますか?ここでビューで基底クラスの変更が更新されない

は私の基底クラスである:ここで

export class MyBaseComponent { 
    protected showCDNumbers: boolean = false; 

    toggleCDNumberVisibility() { 
     this.showCDNumbers = !this.showCDNumbers; 
    } 
} 

がベースから継承したクラスである:ここでは

export class MyComponent extends MyBaseComponent { 

} 

は図である。

<div>{{showCDNumbers}}</div> 
<a (click)="toggleCDNumberVisibility()">Toggle</a> 
+0

'toggleCDNumberVisibility()'メソッドの呼び出しを示すコードスニペットを(テンプレート内に)追加してもいいですか、それともそこに入れてはいけませんか? – amal

+0

トグルイベントを追加しました。それは働いている、それはそれを呼び出す。私はコンソールに入れた。そこにログ。 –

答えて

0

あなたはこれを試すことができますビューがtoggleCDNumberVisibility()メソッド呼び出しで変更されるかどうかを確認します。 @angular/coreライブラリのChangeDetectorRefconstructorで両方のクラス(親と子)に注入し、そのようなdetectChanges()メソッドを使用します。

BaseComponent

import { ChangeDetectorRef } from '@angular/core' 

protected showCDNumbers: boolean = false; 

constructor (protected ref: ChangeDetectorRef) {} 

toggleCDNumberVisibility() { 
this.showCDNumbers = !this.showCDNumbers; 
this.ref.detectChanges(); 
} 

ChildComponent

import { ChangeDetectorRef } from '@angular/core' 

constructor (protected ref: ChangeDetectorRef) { 
super(ref); 
} 
0

Aわずかに異なるバージョン:

export class MyBaseComponent { 
    protected showCDNumbers: boolean = false; 
    constructor(value){ 
    this.showCDNumbers=value; 
    } 

    toggleCDNumberVisibility() { 
     this.showCDNumbers = !this.showCDNumbers; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent extends MyBaseComponent{ 
    name = 'Angular 4'; 
    constructor(){ 
    super(true); 
    } 
    toggleCDNumberVisibility() { 
     super.toggleCDNumberVisibility(); 
    } 

} 

DEMO

関連する問題