Angular进阶:View的概念

发布时间:2019-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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的siblingsDOM关系是<;my-anchor></my-anchor>view1 view2而不是<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上使用let-hero或者let-i="index"这样的语法来定义,heroi成为占位符,具体的值由创建View实例时提供的context对象来决定。
  • let-hero这种没有显式指定绑定属性的template input variable,它的值是context.$implicit

glossary#view

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

脚本宝典总结

以上是脚本宝典为你收集整理的Angular进阶:View的概念全部内容,希望文章能够帮你解决Angular进阶:View的概念所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。