2016-11-28 9 views
3

SITUATIONに定義されていません。イオン2 ViewChild成分は

私はそれを読む方法は@ViewChildです。

私の場合は動作しません。私は、次のエラーを取得しています:

Cannot read property ... of undefined 

CODE:例えば

この

ホームページコンポーネント内部のシンプルな試験方法である: アプリで

testChild() 
{ 
    alert('child working'); 
} 

。コンポーネント子コンポーネントとしてHomePageを宣言します。

@ViewChild(HomePage) homePage: HomePage; 

、その後、コンストラクタからメソッドを呼び出します。

this.homePage.testChild(); 

それは正しく動作する必要がありますか?

代わりに、私はこのエラーを取得しています:

enter image description here

問題はビューがまだロードされていないということではありません。

私は、クリックイベントから子を呼び出すことも試みましたが、同じエラーが発生しました。

QUESTION

は、なぜ子コンポーネントが定義されていないのですか?

私は何が間違っているのか分かりますか?

ありがとうございます!

+0

あなたapp.component詳細コードを共有することができますしてください?たとえば、どこでこのメソッドを呼び出しますか? – echonax

+0

私たちはあなたのapp.component html – PierreDuc

答えて

2

and then call the method from the constructor:

ngAfterViewInitライフサイクルフックで呼び出す必要があります。 Angularがメソッドを呼び出します。

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

@Component() 
export class MyComponent implements AfterViewInit { 

    @ViewChild(HomePage) homePage: HomePage; 

    ngAfterViewInit() { 
    this.homePage.testChild(); 
    } 
} 

も参照してください:

+0

にお返事ありがとうございます。しかし、まだ働いていない。同じエラー。私がどこから呼んでも、エラーは同じです。 – johnnyfittizio

+0

@johnnyfittizioは、実際にテンプレートのコンポーネントであるホームページコンポーネントですか?これは '@ ViewChild'が –

+0

の場合です。はいHomePageはルートコンポーネントであり、app.componentにインポートされます。app.htmlは右メニューにログインフォームがあるダブルメニューです。フォームが動作していれば、すべてのログインはapp.component内にあります。 app.componentフォーム送信機能では、homePageコンポーネントのメソッドを呼び出すだけで済みます。 – johnnyfittizio