相关疑难解决方法(0)

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

根据文档:

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

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

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

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

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

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

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

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

一如既往地谢谢,

肖恩

我可以在本地运行.仅在生产构建中获取错误.

我用过

 import { CommonModule } from '@angular/common';
 imports:      [  CommonModule ]

完整错误如下所示.

client:101 Template parse errors:enter code here`Can't bind to 'ngIf' since it isn't a known property of 'div'. 
("move" class="transport-remove">Remove</a></div>
         <div id="carTypeDiv_1" class="veh-inv-out" [ERROR ->]*ngIf="vehicleData.vesselType == 'road'">
            <ul id="carTypeList_1" class="veh-slides">
    "): VehicleDirective@10:52
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("t:" (click)="removeField($event)" title="Remove" class="transport-remove">Remove</a></div>
         [ERROR ->]<div id="carTypeDiv_1" …