角2親から子コンポーネントメソッドを呼び出す

Question

私はStackOverflowで提案されている別のメソッドを使用しようとしましたが、以下の作業を行うことはできません。

私はParentComponentに入れ子のChildComponentを持っています。

ここでは、親のHTML：私は親の一つに子コンポーネントをインポートした

<div> ... <div> 

<span *ngIf="value" class="option-button cursor-pointer" [attr.modelURL]="value" 
     (click)="$event.stopPropagation();getParts(assemblyLibrary)"> 
    <i class="fa fa-cube"></i> 
</span> 

<child-component></child-component> 

はもちろん、：親コンポーネントに

import { SharedModule } from '../../shared'; //child declaration is inside here 

、私は以下のコードを実装しています：

import { child-component } from '../../../child-component'; 

@Component({ 
    selector: 'parent-component', 
    templateUrl: './parent-component.html', 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class ParentComponent implements OnChanges, OnInit { 
    ... 

    @ViewChild('ChildComponent') childComponent; 

    openDialog(filesToLoad) { 
     this.childComponent.openDialog(filesToLoad); 
    } 

    getParts(value) { 
     this.filesToLoad = []; 

     ... code to populate files to load 

     this.openDialog(this.filesToLoad); 
    }} 
} 

私がHTで宣言されたをクリックしてgetParts（値）を呼び出すと、 ML以下のエラーが表示されます：

VM21157:55 EXCEPTION: Cannot read property 'openDialog' of undefined

多くのユーザーが提案しているこのアプローチには何が問題なのですか？

Answer 1

親HTMLのようなする必要があります。

<child-component #childComponent></child-component> 

、あなたが今@ViewChild

export class ParentComponent implements OnChanges, OnInit { 
    ... 

    @ViewChild('childComponent') childComponent; 

と、この要素にアクセスすることができ、あなたのテンプレートに#ChildComponentセレクタを持っていないので、あなたの@ViewChild('ChildComponent') childComponent;は何も選択しません。