宿主视图是在动态实例化组件时建设的，可以利用ComponentFactoryResolver动态建设实例化一个组件。在 Angular 中，每个组件都绑定到特定的注入器实例，因此在建设组件时我们将通报当前的注入器实例。
视图中各个元素的属性可以动态修改以响应用户的操纵，而这些元素的布局（数量或顺序）则不能。你可以通过在它们的视图容器（ViewContainer）中插入、移动或移除内嵌视图来修改这些元素的布局。
ViewContainerRef
ViewContainerRef是可以将一个或多个视图附着到组件中的容器：
export declare abstract class ViewContainerRef { // 锚元素，用于指定此容器在包括视图中的位置 // 每个视图容器只能有一个锚元素，每个锚元素只能有一个视图容器 abstract get element(): ElementRef; // 此视图容器的 DI abstract get injector(): Injector; // 此容器当前附加了几多视图 abstract get length(): number; // 销毁此容器中的所有视图 abstract clear(): void; // 实例化单个组件，并将其宿主视图插入此容器 abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>; // 实例化一个嵌入式视图并将其插入 abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>; // 以后容器疏散视图而不销毁它 abstract detach(index?: number): ViewRef | null; // 以后容器检索视图 abstract get(index: number): ViewRef | null; // 返回当前容器内视图的索引 abstract indexOf(viewRef: ViewRef): number; // 将视图移动到此容器中的新位置 abstract insert(viewRef: ViewRef, index?: number): ViewRef; abstract move(viewRef: ViewRef, currentIndex: number): ViewRef; // 销毁附加到此容器的视图 abstract remove(index?: number): void; }
任何 DOM 元素都可以用作视图容器，Angular 不会在元素内插入视图，而是将它们附加到绑定到ViewContainer的元素之后。
凡是，标志ng-container元素是标志应建设ViewContainer的位置的最佳选择。它作为注释泛起，因此不会在 DOM 中引入多余的 HTML 元素。
通过ViewContainerRef，可以用createComponent()要领实例化组件时建设宿主视图，也可以用 createEmbeddedView()要领实例化TemplateRef时建设内嵌视图。
视图容器的实例还可以包括其它视图容器，以建设条理化视图（视图树）。
视图树（View hierarchy）
在 Angular 中，凡是会把视图组织成一些视图树（view hierarchies）。视图树是一棵相关视图的树，它们可以作为一个整体动作，是 Angular 改观检测的要害部件之一。
视图树的根视图就是组件的宿主视图。宿主视图可以是内嵌视图树的根，它被收集到了宿主组件上的一个视图容器（ViewContainerRef）中。当用户在应用中导航时（好比利用路由器），视图树可以动态加载或卸载。
视图树和组件树并不是一一对应的：
嵌入到指定视图树上下文中的视图，也大概是其它组件的宿主视图
组件大概和宿主组件位于同一个NgModule中，也大概属于其它NgModule
组件、模板、视图与模块
在 Angular 中，可以通过组件的配套模板来界说其视图。模板就是一种 HTML，它会汇报 Angular 如何渲染该组件。
视图凡是会分条理举办组织，让你能以 UI 分区或页面为单元举办修改、显示或埋没。与组件直接关联的模板会界说该组件的宿主视图。该组件还可以界说一个带条理布局的视图，它包括一些内嵌的视图作为其它组件的宿主。
带条理布局的视图可以包括同一模块（NgModule）中组件的视图，也可以（并且常常会）包括其它模块中界说的组件的视图。
总结本文简朴先容了 Angular 中元素、视图、模板、组件中与视图相关的一些界说，包罗ElementRef，TemplateRef，ViewRef，ComponentRef和ViewContainerRef。
个中，视图是 Angular 中应用措施 UI 的根基构建块，它是一起建设和销毁的最小元素组。
ViewContainerRef主要用于建设和打点内嵌视图或组件视图。组件可以通过设置模板来界说视图，与组件直接关联的模板会界说该组件的宿主视图，同时组件还可以包罗内嵌视图。
到此这篇关于Angular框架详解之视图抽象界说的文章就先容到这了,更多相关Angular视图抽象界说内容请搜索剧本之家以前的文章或继承欣赏下面的相关文章但愿各人今后多多支持剧本之家！