这篇文章主要介绍了Angular中与视图有关的定义有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Angular中与视图有关的定义有哪些文章都会有所收获,下面我们一起来看看吧。Angular 版本可在不同的平台上运行:在浏览器中、在移动平台上或在 Web Worker 中。因此,需要特定级别的抽象来介于平台特定的 API 和框架接口之间。Angular 中通过抽象封装了不同平台的差异,并以下列引用类型的形式出现:ElementRef
,TemplateRef
,ViewRef
,ComponentRef
和ViewC免费云主机、域名ontainerRef
。各抽象类视图定义在阅读源码的时候,如果不清楚这些定义之间的区别,很容易搞混淆。所以,这里我们先来理解下它们之间的区别。元素 ElementRefElementRef
是最基本的抽象。如果观察它的类结构,可以看到它仅包含与其关联的本地元素:该 API 可用于直接访问本地 DOM 元素,可以比作document.getElementById('myId')
。但 Angular 并不鼓励直接使用,尽可能使用 Angular 提供的模板和数据绑定。模板 TemplateRef在 Angular 中,模板用来定义要如何在 HTML 中渲染组件视图的代码。模板通过@Component()
装饰器与组件类类关联起来。模板代码可以作为template
属性的值用内联的方式提供,也可以通过 templateUrl
属性链接到一个独立的 HTML 文件。用TemplateRef
对象表示的其它模板用来定义一些备用视图或内嵌视图,它们可以来自多个不同的组件。TemplateRef
是一组 DOM 元素(ElementRef
),可在整个应用程序的视图中重复使用:就其本身而言,TemplateRef
类是一个简单的类,仅包括:elementRef
属性:拥有对其宿主元素的引用createEmbeddedView
方法:它允许我们创建视图并将其引用作为ViewRef
返回。模板会把纯 HTML 和 Angular 的数据绑定语法、指令和模板表达式组合起来。Angular 的元素会插入或计算那些值,以便在页面显示出来之前修改 HTML 元素。Angular 中的视图在 Angular 中,视图是可显示元素的最小分组单位,它们会被同时创建和销毁。Angular 哲学鼓励开发人员将 UI 视为视图的组合(而不是独立的 html 标签树)。组件(component
) 类及其关联的模板(template
)定义了一个视图。具体实现上,视图由一个与该组件相关的ViewRef
实例表示。ViewRefViewRef
表示一个 Angular 视图:其中,ChangeDetectorRef
提供更改检测功能的基类,用于更改检测树收集所有要检查更改的视图:两种类型的视图Angular 支持两种类型的视图:(1) 链接到模板(template)的嵌入式视图(embeddedView)。嵌入式视图表示视图容器中的 Angular 视图。模板只是保存视图的蓝图,可以使用上述的createEmbeddedView
方法从模板实例化视图。(2) 链接到组件(component)的宿主视图(hostView)。直属于某个组件的视图叫做宿主视图。宿主视图是在动态实例化组件时创建的,可以使用ComponentFactoryResolver
动态创建实例化一个组件。在 Angular 中,每个组件都绑定到特定的注入器实例,因此在创建组件时我们将传递当前的注入器实例。视图中各个元素的属性可以动态修改以响应用户的操作,而这些元素的结构(数量或顺序)则不能。你可以通过在它们的视图容器(ViewContainer
)中插入、移动或移除内嵌视图来修改这些元素的结构。ViewContainerRefViewContainerRef
是可以将一个或多个视图附着到组件中的容器:任何 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中与视图有关的定义有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Angular中与视图有关的定义有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。
这篇文章主要介绍了怎么用纯CSS3实现动画按钮效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 Download click to begin 1.2MB .zip.button01 { wi…