Как передать объект контекста во встроенное представление, созданное с помощью шаблона 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>

angular ng-template
person Bela    schedule 02.08.2017    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вам нужно передать объект с ключами, которые соответствуют синтаксису 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 
});
person Max Koretskyi    schedule 03.08.2017
comment
Спасибо, Максим, я действительно не ожидал ответа так скоро. - person Bela; 03.08.2017
comment
У меня была эта проблема с обнаружением изменений, и я добавил this.changeDetectorRef.detectChanges(); в ngAfterViewInit(), чтобы принудительно создать новый. Кажется, теперь все в порядке. ng:///AppModule/HomeComponent.ngfactory.js:14 ERROR Ошибка: ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после проверки. Предыдущее значение: «не определено». Текущее значение: «Полное руководство по Angular 4». Похоже, что представление было создано после того, как его родитель и его дочерние элементы были проверены на наличие загрязнений. Был ли он создан в хуке обнаружения изменений? - person Bela; 03.08.2017
comment
Пожалуйста, так это сработало? относительно упомянутой вами ошибки следует прочитать Все, что вам нужно чтобы узнать об ExpressionChangedAfterItHasBeenCheckedError ошибке. Также вы можете задать другой вопрос - person Max Koretskyi; 03.08.2017
comment
@AngularInDepth.com: я не понимаю, когда использовать createEmbeddedView и createComponent. Можете ли вы привести какой-нибудь пример или какие преимущества у одного перед другим? - person Blaze; 21.09.2017
comment
@Blaze, можешь создать отдельный вопрос и опубликовать здесь ссылку? Я объясню это там - person Max Koretskyi; 21.09.2017
comment
@AngularInDepth.com спасибо за ответ. Пожалуйста, найдите его здесь - person Blaze; 21.09.2017
comment
Спасибо @AngularInDepth.com. ваш ответ помог мне. Однако я снова застрял. Не могли бы вы взглянуть на stackoverflow.com/questions/51760500/ - person Manu Chadha; 09.08.2018