Angular进阶:View的概念

前端之家收集整理的这篇文章主要介绍了Angular进阶:View的概念前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Angular官方文档并没有详细地对View的概念做讲解,相关的知识点零散分布在几个页面中,在这里总结一下。

ViewContainerRef

  • 在Angular中,只有两种View:Host Views(也叫作Component View)和Embedded View。这点从源码中的isComponentView和isEmbeddedView也能得到证实。
  • View必须要放在ViewContainerRef容器中才能显示
  • ViewContainerRef容器是挂载在元素上的。通过依赖注入或者 ViewChild query,你可以拿到任何元素上的ViewContainerRef。为了节约资源,Angular只为【真正用到ViewContainerRef的元素】实例化ViewContainerRef。拥有ViewContainerRef的元素叫做Anchor element。
  • ViewContainerRef容器中可以放置多个View实例,这些View会成为Anchor element的siblings(DOM关系是@H_403_14@<my-anchor></my-anchor>view1 view2而不是@H_403_14@<my-anchor>view1 view2</my-anchor>)。通过ViewContainerRef提供的API,我们可以插入View、取出View、改变View顺序……

EmbeddedViewRef

  • 在Angular中,View是构建应用UI的基本单元,DOM的构建和销毁是以View为单位的:同一个view中的元素要么一起被构建,要么一起被销毁。
  • 在一个View中,DOM元素的Properties可以自由改变(比如改变样式、改变text节点的内容),但是View的DOM结构不能改变(不能单独插入和删除新元素、不能改变元素的顺序),因为上面已经说了:View是构建应用UI的基本单元,不可割裂。
  • 要改变DOM结构,必须以View为单位:在ViewContainerRef中插入、删除、移动View。

TemplateRef

  • TemplateRef是View的模板,它定义了View的结构。我们可以利用它来创建新的View实例,然后插入到ViewContainerRef中,这种View叫做Embedded View。
  • 至于Component View,它是通过Component来定义的,与TemplateRef无关。

NgTemplateOutlet

  • 使用NgTemplateOutlet,你可以方便地从一个TemplateRef创建View实例并插入View中指定的位置,而不需要手动写操作ViewContainerRef的代码

guide/structural-directives

guide/dynamic-component-loader

  • 这个教程示范了如何在ViewContainerRef中插入Component实例(控制Component View),实现动态加载Component。

ViewRef

(只在源码中使用,没有解释)

Microsyntaxtemplate input variable

  • Microsyntaxtemplate input variable是编写和使用structural directive的利器。structural directive的使用者在自己的template中使用structural directive时,可以使用更简洁的语法。
  • template input variable,以这个为例, 通过在ng-template上使用@H_403_14@let-hero或者@H_403_14@let-i="index"这样的语法来定义,@H_403_14@hero和@H_403_14@i成为占位符,具体的值由创建View实例时提供的context对象来决定。
  • @H_403_14@let-hero这种没有显式指定绑定属性的template input variable,它的值是context.$implicit

glossary#view

View可以层层嵌套,最终整个应用UI就是一棵View tree。

猜你在找的Angularjs相关文章