角2 - コンポーネント継承 - ベーステンプレートに伝播されない基本クラス

Question

コンポーネント継承を使用する際に特別なことはありますか？

編集：これは、継承に関係なく、親/子ビュー/コンポーネント通信

私は、基本クラステンプレートで定義されたdiv要素を隠そうとして、それは、ページ内の変数を

を動作しません。それは

第一のコードに変更してしまった場合でも、でも、更新されていない、私は[隠さ]で試してみましたし、その後* ngIf

私はchangeDetectorRefを使用してみましたが、それは

を何もしません

その値は、テンプレート

基底クラスに伝播されていないようだ。

@Component({ 
    selector: 'my-content', 
    templateUrl: './content.component.html', 
    styleUrls: ['./content.component.css'], 
})  
export class ContentComponent implements OnInit { 

    protected overlayVisible:boolean; 

    constructor(....){...} 

    ngOnInit() { 
    } 

    showOverlay() 
    { 
     this.overlayVisible=true; <<<<<<<<<<<<<< THESE GET CALLED 
    } 

    hideOverlay() 
    { 
     this.overlayVisible=false; <<<<<<<<<<<<<< THESE GET CALLED 
    } 
} 

ベーステンプレート（content.component.html）：

<div> 
    <div class="contentMainDiv"> 
     <div class="contentBodyDiv"><ng-content select="[body]"></ng-content></div> 
     <div [innerHTML]=" overlayVisible?'true':'false' "></div> /// DEBUG DIV 
     <div [hidden]="!overlayVisible" class="contentOverlay" > 
      <my-wait></my-wait> 
     </div> 

    </div> 
</div> 

子コンポーネント：

export class CustomersComponent extends ContentComponent implements OnInit { 

    private customers: any; 

    constructor(
     private customersService: CustomersService, 
     injector:Injector 
     ) { super(injector); } 

    getCustomers() { 
     this.showOverlay(); 

     this.customersService.getCustomers().subscribe((customers: any) => { 
      this.customers = customers; 
      this.hideOverlay(); 
     }); 
    } 

子テンプレート：

<my-content> 
    <div body> 
     <div *ngIf="customers"> 
      some table ... 
     </div> 
    </div> 
</my-content> 

私は

を何をしないのです、我々はコンポーネントの継承を使用するときに実行するために特別な何かがあるのでしょうか？

ありがとう

Answer 1

の方法は、私はそれが仕事EXPORTAS

<my-base-frame #baseFrame> 
... 
</my-base-frame> 

に除去することである製コード

@ViewChildren('baseFrame') baseFrames; // finaly found how to get base class instance 

で

...

this.baseFrames.changes.subscribe((_comps: QueryList <any>) 
    { 
     if(this.baseFrames.first && !this.baseFrame) 
     { 
      this.baseFrame=this.baseFrames.first; 
      ... 
     } 
    }) 

Answer 2

親コンポーネントにあるメソッドを呼び出すのは正しいですか？その後EventEmitterはあなたを助けることができる：

<child-component (showOverlay)="showOverlay()" (hideOverlay)="hideOverlay()"></child-component>

子コンポーネント：

import { EventEmitter, Output, OnDestroy } from '@angular/core'; 

@Output showOverlay = new EventEmitter(); 
@Output hideOverlay = new EventEmitter(); 


getCustomers() { 
    this.showOverlay.emit(); 
<....rest of your code.....> 

ngOnDestroy() { 
    this.hideOverlay.emit(); 
} 

私はそうngOnDestroyでhideOverlayを放出され、あなたが子コンポーネントを破壊して、オーバーレイを非表示にすることを前提としています。

Answer 3

基本クラスの変数は、子クラスのメソッドを実行しても影響を受けません。 this.showOverlay（）を実行すると、this.overlayVisibleが子コンポーネントのスコープ内で変更されました。使用成分の相互作用https://angular.io/guide/component-interaction#parent-listens-for-child-event

Answer 4

（部分）答えはこれです：

オーバーライドクラスは、独自のテンプレートのインスタンス を有している

ので、一方がそれにベーステンプレートをリンクする必要が

詳細：https://github.com/angular/angular/issues/18920

ベースクラスでは、コンポーネントアノテーションに追加します。

exportAs: 'myContentComponent', 

と子クラスは、彼のテンプレートはそれを

template: `<my-baseclass-component #myContentComponent>.. 
      <button (click)="myContentComponent.showOverlay()">toggle</button> 

を参照している必要があります今、私は誰にも答えることができれば、私は更新します

上記の質問にフィットするようにtypescriptです子コンポーネントからその関数を呼び出す方法を見当がつかないこの回答

おかげ