ビューで基底クラスの変更が更新されない

Question

私は角度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> 

Answer 1

あなたはこれを試すことができますビューがtoggleCDNumberVisibility()メソッド呼び出しで変更されるかどうかを確認します。 @angular/coreライブラリのChangeDetectorRefをconstructorで両方のクラス（親と子）に注入し、そのような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); 
} 

Answer 2

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