ngFor 多上下文中的 Angular 6 ngTemplateOutlet

Question

假设我有以下组件:

@Component({
  selector: 'todo-lib',
  template: `
<li *ngFor="let todo of libService.todos">
  <div class="view">
    <label>{{todo.title}}</label>
    <ng-container *ngTemplateOutlet="incomingTemplate;context:ctx"></ng-container>
  </div>
</li>

<ng-template #incomingTemplate let-service="templateService">
<button (click)="service.removeTodo(todo)">delete</button>
</ng-template>
`,
  styles: []
})
export class TodoLibComponent implements OnInit {

  ctx = {
    templateService: this.libService
  };

待办事项列表在 libService 中。我不在这里发布它，因为它的逻辑并不重要。 “ng-template”将从另一个组件注入(inject)，并将删除按钮添加到我的待办事项列表中。这意味着:通常没有删除选项，除了将提供“ng-template”

但是，这种方法会失败并出现以下错误:

message: "_v.context.todo is undefined"

因为“todo”不是上下文对象“ctx”的一部分，所以我无法访问它。为了实现这一点，我将被迫这样做:

<ng-container *ngTemplateOutlet="incomingTemplate;context:{ todo: todo}">

这将允许我访问待办事项对象，但不再访问服务。

我似乎无法同时访问 ngFor 定义的“todo”属性和“ctx”属性中定义的服务。是否有解决方案可以同时实现这两者？

干杯

Answer 1

我还在 Angular 的官方 github 存储库中提到了这一点。开发者的正确答案是:

@dawidgarus:你可以这样做:

<ng-container *ngTemplateOutlet="incomingTemplate;context:{ todo: todo, templateService: libService }">

此外:

@dawidgarus 建议是一个很好的建议，它遵循当前 Angular 中范围界定的工作方式——我认为我们不想重新访问它。我唯一建议的是使用 <ng-template>元素而不是 <ng-container>因为它生成的代码更少，所以不会在 DOM 等中创建不必要的注释节点:

<ng-template [ngTemplateOutlet]="incomingTemplate" [ngTemplateOutletContext]="{ todo: todo, templateService: libService }">

所以我使用 ng-template 而不是 ng-container。

干杯