각도 2 - 반투명 템플릿으로 구성 요소 데이터를 공유하는 방법

Question

저는 Angular2를 처음 사용합니다. 다음 작업을 수행하려고합니다.

래퍼 구성 요소에서 필터 특성을 읽고이를 사용하여 데이터 원본에서 데이터를 검색하려고합니다. 그런 다음이 데이터를 템플릿 부분에 사용할 수 있도록 이 내부에인데, 어떤 구성 요소가 transclude 될지 미리 알지 못합니다.

예를 들어, 그냥 아이디어를 제공합니다 : 래퍼 구성 요소 내에 중첩 될 수있는 다른 항목 뷰어 구성 요소의 전체 세트가

<wrapper-component filter="key='abcd'"> 

    <item-viewer *ngFor="let item of retrievedData"></item-viewer> 

</wrapper-component> 

.

이렇게하려면 Angular2에 어떤 방법이 있습니까? 아니면 접근 방식이 완전히 잘못된 것일까 요?

Answer 1

오케이, 혼란 2 일 후에 나는 내가 원했던 것을 얻을 수 있었다. 그것은 최적이 아니지만 효과적이며 단순 해 보인다. 전체 트릭은 래퍼 구성 요소를 참조하기 위해 템플릿 변수를 추가하는 것이 었습니다.

템플릿된다 : 랩퍼 성분이 #mySource 템플릿 변수에 할당 된

<wrapper-component #mySource filter="key='abcd'"> 

    <item-viewer *ngFor="let item of mySource.itemlist" [data]="item"></item-viewer> 

</wrapper-component> 

후에는 매개자 템플릿에 그 공중 속성을 참조 할 수있다.

그런 다음 WrapperComponent.itemlist에 변경 사항이있을 때마다 ngFor 출력이 그에 따라 업데이트됩니다.

이 내 완전히 일반적인 항목 시각화 구성 요소입니다

@Component({ 
    moduleId: module.id, 
    selector: 'item-viewer', 
    templateUrl: '<h1>{{data.title}</h1><p>{{data.paragraph}}</p>' 
}) 
export class ItemViewer{ 
    @Input() data: any; 

    constructor() { } 
} 

그리고이 래퍼 구성 요소입니다

@Component({ 
    moduleId: module.id, 
    selector: 'wrapper-component', 
    template: '... <ng-content></ng-content> ...' 
}) 
export class WrapperComponent{ 
    @Input() filter: string; 
    itemlist: any[]; 

    constructor() { } 

    ngOnInit() { 
     // every three seconds the component adds a new item to 
     // itemlist to show that it is rendered by ItemViewer 
     setInterval(()=> { 
      this.itemlist.push({ title: "title"+filter, 
           paragraph: "par"+ filter 
           }); 
      }, 3000); 
    } 
} 

나는이 솔루션을 찾을 수있는 유일한 주요 고장이 #mySource 변수가 있다는 것입니다 전역 템플릿 변수가됩니다. 이는 외부로도 참조 될 수 있으며, 이는 바람직하지 않습니다. 동일한 메소드를 여러 번 재사용하려면 매번 변수 이름을 변경해야합니다.

더 좋은 아이디어 나 문제점이 있으면 알려주십시오.