如何上下文对象传递给与NG-模板

创建嵌入视图我还没有发现任何的代码片段作为尚未与DOC太简洁。所以我的问题是如何PARAM传递到NG-模板，以及如何获得索引回来？直觉上下面的应该可以工作，但它只是抛出“未定义”。任何帮助表示赞赏。如何上下文对象传递给与NG-模板

@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>

来源

2017-08-02 Bela

你需要传递一个对象，具有符合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 
});

来源

2017-08-03 04:54:39

感谢鲆，我真的没有预期的答复很快。 – Bela

我有过这样的变化检测问题并添加this.changeDetectorRef.detectChanges（）;到ngAfterViewInit（）强制一个新的。现在看起来不错。 NG：///AppModule/HomeComponent.ngfactory.js：14 Error错误：ExpressionChangedAfterItHasBeenCheckedError：它检查后表达发生了变化。先前的值：'未定义'。当前值：“角度4的完整指南”。它的父母及其孩子已被脏检查后，似乎已创建视图。它是否在更改检测挂钩中创建？ – Bela

不客气，它的工作原理是什么？关于你提到的错误应该是[你需要知道的'ExpressionChangedAfterItHasBeenCheckedError'错误]（https://hackernoon.com/everything-you-need-to-know-about-the-expressionchangedafterithasbouble-你还可以问另一个问题 –

如何上下文对象传递给与NG-模板

回答

相关问题