Angular 6 ngFor 多上下文中的 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" 将从另一个组件注入，并将删除按钮添加到我的待办事项列表中。这意味着：通常没有删除选项，除了 "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。

干杯

Answer 2

好像传入函数和变量会更简单

<ng-template #incomingTemplate let-service="templateService">
<button (click)="service">delete</button>
</ng-template>

然后是

<ng-container *ngTemplateOutlet="incomingTemplate; context:removeTodo(todo)"></ng-container>

Angular 6 ngFor 多上下文中的 ngTemplateOutlet

Angular 6 ngTemplateOutlet inside ngFor multiple context

ngfor

angular

angular6