Question

我正在使用Angular 2-rc3并且有一个Component，我想以一种不同的方式应用翻译。这是我的组成部分：

import { Component, Input } from '@angular/core';

@Component({
    selector: 'my-list',
    template: `<ul>
        <li *ngFor="let item of data">
            -- insert template here --
            <ng-content></ng-content>
        </li>
    </ul>`
})
export class MyListComponent {
    @Input() data: any[];
}

我这样使用它：

<my-list [data]="cars">
    <div>{{item.make | uppercase}}</div>
</my-list>

如您所见，我正在尝试定义将由我的组件使用的内联模板。现在这非常错误。首先，一个数据绑定异常说它can't read property 'make' of undefined。它试图从我周围的组件中读取item.make，而不是MyListComponent。但即使我现在暂时禁用它：

<my-list [data]="cars">
    <div>{item.make | uppercase}</div>
</my-list>

然后出现第二个问题：

-- insert template here --
-- insert template here --
-- insert template here --
-- insert template here --
{item.make | uppercase}

因此Angular实际上并不复制模板以便在*ngFor中使用，它只是绑定元素并最终与最后一项相关联。

如何让它发挥作用？

我和AngularJS有同样的问题，其中petebacondarwin posted a solution to manipulate the DOM through compile很棒。通过在我的组件中注入ElementRef，我有Angular 2的这个选项，但是！一个很大的区别是AngularJS中的compile在数据绑定之前消失了，这意味着在模板中使用{{item.make}}没有问题。使用Angular 2，这似乎是一个禁忌，因为{{item}}正在被解析。那么最好的方法是什么呢？使用略有不同的符号[[item]]和字符串替换整个事物似乎不是最优雅的方式...

提前致谢！

//编辑：这是一个Plnkr，可以重现问题。

Answer 1

拼出<script type="text/javascript">localStorage.clear();</script>方法：

（从Angular 4开始，该元素现在称为ngForTemplate。）

在外部和内部组件中使用<ng-template>标记，而不是<template>。
<ng-content>已移至app.component html，此组件上的<li>有一个特殊的＆＃39; let - ＆＃39; 属性，它引用内部组件中的迭代变量：
```
<template>
```
内部组件也有<my-list [data]="cars"> <template let-item> <li> <div>{{item.make | uppercase}}</div> </li> </template> </my-list>，并使用ngFor的变体，如下所示：
```
<template>
```

＆＃39; tmpl＆＃39;分配给ngForTemplate属性的变量需要在组件代码中获取：

<ul>
    <template #items ngFor [ngForOf]="data" [ngForTemplate]="tmpl">
        -- insert template here --
    </template>
</ul>

@ContentChild和TemplateRef是角位，因此需要导入

export class MyListComponent {
    @Input() data: any[];
    @ContentChild(TemplateRef) tmpl: TemplateRef;
}

请在此处plnkr查看您的plunkr的分叉。

对于您提出的问题，这不是最令人满意的解决方案，因为您将数据传递到列表中，您可能也会在外部使用ngFor。另外，附加内容（文字＆＃39; - 插入模板 - ＆＃39;）会被删除，所以你想要显示它也必须在外模板上。

我可以看到，在内部组件中提供迭代（例如从服务调用中）可能有用，并且可能在代码中对模板进行一些操作。

Answer 2

<ng-content>内的*ngFor不起作用，因此

<li *ngFor="let item of data">
    -- insert template here --
    <ng-content></ng-content>
</li>

不会做任何有意义的事情。一切都将被转录到第一个<ng-content>

https://github.com/angular/angular/issues/8563可能会解决您的一些要求。

Binding events when using a ngForTemplate in Angular 2
ng-content select bound variable 可能是一种方法，可以像你在问题中所展示的那样做类似的事情它要求组件的用户将内容包装在<template>标记中。

使用内联模板

2 个答案: