Angular2の親コンポーネントのコンポーネントのリストから子コンポーネントのメソッドを呼び出す方法は？

Question

私は基本的に親コンポーネントのテンプレートで反復されるリストコンポーネントである子コンポーネントを持っています。親コンポーネントの子コンポーネントにメソッドがあるとします。私はこのメソッドを多くのコンポーネントの1つに属しています。

たとえば、これは私の子コンポーネントである：

@Component({ 
    selector: 'list-item', 
    template: '<li>{{value}}</li>', 
}) 
export class ListItem implements OnInit { 
    @Input value: number; 

    changeValue(newValue) { 
     this.value = newValue; 
    } 
} 

そして、これが私の親コンポーネントがどのように見えるかである -

@Component({ 
    selector: 'list', 
    template: '<div><list-item *ngFor="let item of items" [value]="item.value"></list-item></div>', 
}) 
export class List implements OnInit { 
    // Some code to call **changeValue** 
    // method of the let's say the second 
    // list-item from the template 
} 

私は約@ViewChildデコレータを知っているが、それはのための仕事です最初のものだけ。

子コンポーネントを独立した再利用可能なコンポーネントと見なします。だからパブ/サブの使用は良い考えではありません。

Answer 1

コンポーネントがクラスであるので、あなたはその公共メソッドにアクセスすることができるはず ...私は上記のコメントに同意する、しかし、あなたがする必要がある場合。親のプロバイダに子クラスを提供する必要があります：[ChildComponent]。

 @Component({ 
     selector: 'parent', 
     templateUrl: './parent.component.html', 
     styleUrls: ['./parent.component.scss'], 
     providers: [ChildComponent] 
    }) 
    export class ParentComponent implements OnInit { 

    constructor(private child: ChildComponent){} 

    ngOnInit() { 
     this.child.foo(); 
    } 

} 

@Component({ 
     selector: 'child', 
     templateUrl: './child.component.html', 
     styleUrls: ['./child.component.scss'], 

    }) 
    export class ChildComponent implements OnInit { 

    constructor(){} 

    public foo() { 
    console.log('FOO') 
    } 

}