7

我正在使用 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 发布了一个通过 compile 操作 DOM 的解决方案，这很棒。通过注入我的组件，我也有 Angular 2 的这个选项ElementRef，但是！一个很大的区别是AngularJS 在数据绑定之前就关闭了，这意味着在模板中compile使用没有问题。{{item.make}}使用 Angular 2，这似乎是不可能的，因为{{item}}它是预先解析的。那么解决这个问题的最佳方法是什么？使用稍微不同的符号[[item]]和字符串替换整个东西似乎不是最优雅的方式......

提前致谢！

// 编辑：这是一个重现问题的Plnkr。

4

2 回答 2

6

说明ngForTemplate方法：

（从 Angular 4 开始，该元素现在称为<ng-template>.）

  1. <template>在外部和内部组件中都使用标签，而不是<ng-content>.

  2. 被<li>移动到 app.component html，并且<template>这个组件上有一个特殊的 'let-'属性，它引用了内部组件中的迭代变量： 

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

  3. 内部组件也具有<template>并使用 ngFor 的变体，如下所示： 

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

  4. 分配给 ngForTemplate 属性的 'tmpl' 变量需要在组件代码中获取： 

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

  5. @ContentChild 和 TemplateRef 是角位，所以需要导入

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

在此处plnkr中查看您的 plunkr 的分支以及这些更改。

对于您所说的问题，这不是最令人满意的解决方案，因为您将数据传递到列表中，您不妨将 ngFor 放在外部。另外，附加内容（文字'-- 在此处插入模板--'）被删除，因此您希望显示它也必须在外部模板上。

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

于 2017-02-13T06:43:30.223 回答
1

  • <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可能会解决您的一些要求。

于 2016-06-24T17:15:20.283 回答