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
  };

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

但是，此方法将失败并出现以下错误：

message: "_v.context.todo is undefined"

因为＆＃34; todo＆＃34;不是上下文对象的一部分＆nbsp; ctx＆＃39;我无法访问它。要做到这一点，我将被迫这样做：

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

这将让我访问todo对象而不再访问服务。

似乎我无法访问＆＃39; todo＆＃39;由ngFor定义的属性和＆lt; ctx＆＃39;中定义的服务财产同时。是否有解决方案来实现这两个目标？

干杯

Answer 1

我还在Angular的官方github存储库中提到过。开发者的corrext anser是：

@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 ngTemplateOutlet在ngfor多个上下文中

2 个答案: