Question

我是Angular2的新手。我正在尝试执行以下操作：

我想要一个包装器组件来读取过滤器属性并使用它来从数据源中检索数据;然后将这些数据提供给其中 transcluded 的模板部分，而不事先知道它将转换哪些组件。

例如，只是提出一个想法：

<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变量成为全局模板变量 - 它也可以在转换之外引用，这绝对是不可取的。如果要多次重复使用相同的方法，则需要每次都更改变量名称。

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

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

1 个答案: