Угловая 2 - как делиться данными о компонентах с закрытым шаблоном

Question

Я новичок в Angular2. Я пытаюсь сделать следующее:

Я хочу, чтобы компонент-оболочка читал атрибут фильтра и использовал его для извлечения данных из источника данных; затем сделайте эти данные доступными для части шаблона, которая составляет , заключенного в нее, без предварительного знания того, какие компоненты он перейдет.

Например, и просто дать представление:

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

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

</wrapper-component> 

Где есть целый набор различных компонентов пункта-просмотр, которые могут быть вложенными внутри компонента обертки.

Есть ли способ в Angular2 для этого? Или, может быть, подход совершенно неправильный?

Answer 1

Хорошо, после двух дней путаницы мне удалось получить то, что я хотел - это не оптимально, но оно работает, и это выглядит просто. Весь трюк состоял в том, чтобы добавить переменную шаблона для ссылки на компонент оболочки.

Шаблон становится:

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

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

</wrapper-component> 

После того, как компонент обертка присвоен переменной шаблона #mySource, можно ссылаться на него и его общие свойства в шаблоне включены через.

Затем, когда есть изменения в 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 становится глобальной переменной шаблона - на нее можно ссылаться также вне перехода, что, безусловно, нежелательно. И если вы хотите повторно использовать один и тот же метод несколько раз, вам нужно каждый раз менять имя переменной.

Если у вас есть идеи или проблемы, укажите, пожалуйста, дайте мне знать.