부모 구성 요소의 구성 요소 목록에서 Angular2로 자식 구성 요소의 메서드를 호출하는 방법?

Question

기본적으로 부모 구성 요소의 템플릿에서 반복되는 목록 구성 요소 인 하위 구성 요소가 있습니다. 부모 구성 요소의 하위 구성 요소에있는 메서드를 호출하려고합니다. 메서드를 여러 구성 요소 중 하나에 속하게하고 싶습니다. 예를 들어

이 내 아이의 구성 요소입니다

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

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

그리고 이것은처럼 내 부모 구성 요소 모습입니다 - 나는 약 가 장식을 @ViewChild 알고

@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 
} 

하지만이에 대한 작업을 것 같다 첫 번째 것만

독립적 인 재사용 가능한 구성 요소로 하위 구성 요소를 고려하십시오. 그래서 pub/sub의 사용은 좋은 생각이 아닙니다.

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') 
    } 

}