如何上下文對象傳遞給與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-模板

回答

相關問題