角2アクセスルータ - アウトレットコンポーネント親の機能

Question

AppComponentで試し子ボタンを使用して内部でレンダリングされるホームコンポーネント関数callFromParent（）にアクセスしようとしています。私はエラーとして "ERROR TypeError：未定義の 'callFromParent'プロパティを読み取ることができません"

私は同様の質問を試みたが、何も私のために働いた。助けてください。

// App Component 
 

 
@ViewChild(HomeComponent) homeComponent: HomeComponent; 
 

 
    callChild() { 
 
    this.homeComponent.callFromParent(); 
 
    } 
 
    
 
    
 
//Home Component 
 
    
 
callFromParent() { 
 
    alert('Hi'); 
 
    }

<!-- App Component --> 
 

 
<button (click)="callChild()">Try Child</button> 
 
<router-outlet> 
 
    <home-component></home-component> 
 
</router-outlet>

Answer 1

を次のように、それは両方の子タグを持ってしても意味がありません（代わりにViewChildを使用しての）interaction using local variableを使用することができますおよび同じコンポーネントのルータコンセントに接続します。しかしrouter-outletの背後にあるコンポーネントがContentChildで行うことができます達する。

app.component：

import { ContentChild } from '@angular/core'; 

selector: ... 
templateUrl: ... 
providers: [ HomeComponent ] 

// ... 

@ContentChild(HomeComponent) 
private homeComponent : HomeComponent; 

callChild() { 
    this.homeComponent.callFromParent(); 
} 

Answer 2

あなたが言及した他のよう

<!-- App Component --> 

<button (click)="home.callFromParent()">Try Child</button> 
<home-component #home></home-component>