angular - 如何将上下文对象传递给使用 ng-template 创建的嵌入式 View

Question

到目前为止，我还没有找到任何代码片段，而且文档太简洁了。所以我的问题是如何将参数传递给 ng-template 以及如何取回索引？直觉上下面应该工作，但它只是抛出“未定义”。感谢您的帮助。

@ViewChild("vc", { read: ViewContainerRef }) vc: ViewContainerRef;
  @ViewChild("tpl") tpl: TemplateRef<any>;

  ngAfterViewInit() {
    this.vc.createEmbeddedView(this.tpl,
      new Book("The Complete Guide to Angular 4", 55));
    this.vc.createEmbeddedView(this.tpl,
      new Book("Building Web Components with TypeScript and Angular 4", 48));
  }
  deleteBook(index) {
    console.log("deleteBook index ", index);
  }

<div class="container">
    <div class="card-deck">
        <ng-container #vc></ng-container>
    </div>
    <ng-template #tpl let-book="book" let-index="index">
        <div class="card">
            <img class="card-img-top" src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Title: {{book.title}}</h4>
                <p class="card-text">Price: {{book.price}}</p>
                <button type="button" class="btn btn-primary" (click)="deleteBook(index)">Delete</button>

            </div>
        </div>
    </ng-template>
</div>

Answer 1

您需要传递一个对象，其键与 let-keyname 语法匹配:

<ng-template #tpl let-book="book" let-index="index">
   ...

this.vc.createEmbeddedView(this.tpl, { 
    book: new Book("The Complete Guide to Angular 4", 55), 
    index: someIndex 
});