Angular 2 - 如何与transcluded模板共享组件数据

我是Angular2的新手。我试图执行以下操作：Angular 2 - 如何与transcluded模板共享组件数据

我想要一个包装器组件来读取一个过滤器属性并使用它从数据源中检索数据;然后将该数据提供给模板内部的包括的部分，而无需预先知道它将跨越哪些组件。

例如，并且只给一个想法：

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

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

</wrapper-component>

在存在一整套可嵌套在包装部件内的不同项目的查看器组件。

Angular2有什么办法可以做到这一点吗？或者，也许这种方法是完全错误的？

来源

2016-11-16 udik

有什么不把它传递给' **和**''。您可以使用共享服务来共享数据，否则对于transcluded元素没有简单的方法 - 除非事先知道组件类型。 –

您好@GünterZöchbauer，感谢您的评论。我找到了解决方案，并将其作为答案发布 - 我看到你是Angular2的专家，也许你可以告诉我，如果你看到问题的方法。谢谢！ – udik

看起来不错。。。。 ..。。 .. –

好吧，经过两天的困惑，我设法得到了我想要的 - 这不是最优的，但它的工作原理，它看起来很简单。整个技巧是添加一个模板变量来引用包装器组件。

模板变成：

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

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

</wrapper-component>

一旦包装部件已被分配给#mySource模板变量，有可能引用它和它的公共属性在transcluded模板。

然后，只要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变量成为一个全局模板变量 - 它也可以在变形之外被引用，这绝对是不受欢迎的。如果您想多次重复使用同一个方法，则需要每次更改变量名称。

如果您有更好的想法或问题需要指出，请让我知道。

来源

2016-11-16 13:24:21 udik

Angular 2 - 如何与transcluded模板共享组件数据

回答

相关问题