相关疑难解决方法(0)

为了更深入地了解Angular 2,我希望有人能够对组件,指令及其容器和视图的底层结构进行深入的解释/教程.

根据文档:

组件的容器可以包含两种视图.通过createComponent实例化组件创建的主机视图和通过createEmbeddedView实例化嵌入式模板创建的嵌入式视图.视图容器在包含视图中的位置由Anchor元素指定.每个视图容器只能有一个锚元素,每个锚元素只能有一个视图容器.附加到此容器的视图的根元素将成为"渲染视图"中"锚点元素"的兄弟元素.

这留下了许多未解决的问题,例如:

一个主机视图指的是组件驻留在元件和嵌入式视图指的是组件的模板本身？

在手动创建(通过createComponent)以及通过另一个托管组件(父级)以声明方式创建时,这两种情况都是如此吗？

指令也是如此,它没有模板(因此没有视图)？以及如何在Shadow dom环境(浏览器实际上支持组件主机)和模拟环境中如何工作？

Angular2确实做了很多魔术,并且为了成为一名专家,我希望更好地理解(可能通过可视化图表)整个关系:ViewContainerRef,主机视图,模板,嵌入式模板,ViewChild,ViewContainer及其层次结构组件和指令.

我认为自己非常精通Angular2(已经完成了2个大型项目)但仍然觉得我对下划线内部工作的理解存在漏洞.

当然你不需要知道汽车是如何驾驶汽车的,但如果你这样做,你会更好地处理它,

一如既往地谢谢,

肖恩

我还没有找到任何代码片段，而且文档太简洁了。所以我的问题是如何将 param 传递给 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> …