Shulou(Shulou.com)06/01 Report--

This article mainly introduces the Angular and view-related definition of what the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe that you read this Angular and view-related definition of which articles will have a harvest, let's take a look at it.

View abstraction in Angular

Angular versions can be run on different platforms: in browsers, on mobile platforms, or in Web Worker. Therefore, a specific level of abstraction is required between platform-specific API and framework interfaces.

Angular encapsulates differences between different platforms through abstraction and appears in the form of the following reference types: ElementRef,TemplateRef,ViewRef,ComponentRef and ViewContainerRef.

View definition of each abstract class

When reading the source code, it is easy to get confused if you are not clear about the differences between these definitions. So, let's first understand the difference between them.

Element ElementRef

ElementRef is the most basic abstraction. If you look at its class structure, you can see that it contains only the local elements associated with it:

Export class ElementRef {/ / underlying native elements / / if direct access to native elements is not supported (for example, when the application is running in Web Worker), null public nativeElement: t; constructor (nativeElement: t) {this.nativeElement = nativeElement;}.}

This API can be used to directly access local DOM elements, which can be compared to document.getElementById ('myId'). However, Angular does not encourage direct use, using templates and data bindings provided by Angular whenever possible.

Template TemplateRef

In Angular, templates are used to define the code that defines how component views are rendered in HTML.

Templates are associated with component classes through the @ Component () decorator. Template code can be provided inline as the value of the template attribute, or it can be linked to a separate HTML file through the templateUrl attribute.

Other templates represented by TemplateRef objects are used to define alternate or embedded views that can come from many different components. TemplateRef is a set of DOM elements (ElementRef) that can be reused in the view of the entire application:

Export abstract class TemplateRef {/ / anchor element abstract get elementRef () in the parent view of this embedded view: ElementRef; / / instantiate the embedded view based on this template and attach it to the view container abstract createEmbeddedView (context: C): EmbeddedViewRef;.}

For its part, the TemplateRef class is a simple class that includes only:

ElementRef attribute: has a reference to its host element

The createEmbeddedView method: it allows us to create a view and return its reference as ViewRef.

Templates combine pure HTML and Angular data binding syntax, instructions, and template expressions. The element of Angular inserts or calculates those values to modify the HTML element before the page is displayed.

Views in Angular

In Angular, a view is the smallest grouping unit of displayable elements, which are created and destroyed at the same time. The Angular philosophy encourages developers to think of UI as a combination of views (rather than a separate html tag tree).

The component class and its associated template (template) define a view. In terms of implementation, the view is represented by a ViewRef instance associated with the component.

ViewRef

ViewRef represents an Angular view:

Export declare abstract class ViewRef extends ChangeDetectorRef {/ / destroy the view and all data structures associated with it abstract get destroyed (): boolean; / / report whether this view has been destroyed abstract destroy (): void; / / lifecycle hook, providing the view with other developer-defined cleanup capabilities abstract onDestroy (callback: Function): any;}

Where ChangeDetectorRef provides the base class of the change detection function, which is used for the change detection tree to collect all the views to check for changes:

Export declare abstract class ChangeDetectorRef {/ / when the input has changed or an event is triggered in the view, the component is usually marked as dirty (needs to be re-rendered) / / this method is called to ensure that the component abstract checkNoChanges (): void; / / detaches the view from the change detection tree even if these triggers do not occur. The detached view is not checked until it is reconnected. / / use with detectChanges () to implement local change detection check abstract detach (): void; / / check this view and its children, and use it with detach () to achieve local change detection check abstract detectChanges (): void; / / check the change detector and its children, and if any changes are detected, throw the exception abstract markForCheck (): void / / reattach previously separated views to the change detection tree / / by default, views will be attached to the tree abstract reattach (): void;}

Two types of views

Angular supports two types of views:

(1) Link to the embedded view (embeddedView) of the template (template).

The embedded view represents the Angular view in the view container. A template is simply a blueprint for saving the view, and you can instantiate the view from the template using the createEmbeddedView method described above.

(2) Link to the host view (hostView) of the component (component).

A view that belongs directly to a component is called a host view.

The host view is created when a component is instantiated dynamically, and a component can be instantiated using ComponentFactoryResolver dynamic creation. In Angular, each component is bound to a specific injector instance, so we will pass the current injector instance when we create the component.

The properties of individual elements in the view can be dynamically modified to respond to user actions, while the structure (quantity or order) of these elements cannot. You can modify the structure of these elements by inserting, moving or removing embedded views in their view containers (ViewContainer).

ViewContainerRef

A ViewContainerRef is a container that can attach one or more views to a component:

Export declare abstract class ViewContainerRef {/ / anchor element, used to specify the location of this container in the containing view / / each view container can have only one anchor element, and each anchor element can have only one view container abstract get element (): ElementRef; / / DI abstract get injector () of this view container: Injector; / / how many views are currently attached to this container abstract get length (): number / / destroy all views in this container abstract clear (): void; / / instantiate a single component and insert its host view into the container abstract createComponent (componentFactory: ComponentFactory, index?: number, injector?: Injector, projectableNodes?: any [] [], ngModule?: NgModuleRef): ComponentRef; / / instantiate an embedded view and insert it into abstract createEmbeddedView (templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef / / detach views from this container without destroying it abstract detach (index?: number): ViewRef | null; / / retrieve views from this container abstract get (index: number): ViewRef | null; / / returns the index abstract indexOf (viewRef: ViewRef) of views in the current container: number; / / move the view to a new location in this container abstract insert (viewRef: ViewRef, index?: number): ViewRef Abstract move (viewRef: ViewRef, currentIndex: number): ViewRef; / / destroy the view abstract remove (index?: number): void;} attached to this container

Any DOM element can be used as a view container, and Angular does not insert views within the element, but appends them to the element bound to the ViewContainer.

In general, the tag ng-container element is the best choice for where the tag should create the ViewContainer. It is rendered as a comment, so no extra HTML elements are introduced into the DOM.

With ViewContainerRef, you can create a host view when a component is instantiated with the createComponent () method, or an embedded view when a TemplateRef is instantiated with the createEmbeddedView () method.

Instances of view containers can also contain other view containers to create hierarchical views (view trees).

View tree (View hierarchy)

In Angular, views are usually organized into view hierarchies. The view tree is a tree of related views, which can act as a whole and is one of the key components of Angular change detection.

The root view of the view tree is the host view of the component. The host view can be the root of the embedded view tree, which is collected into a view container (ViewContainerRef) on the host component. When a user navigates through an application (such as using a router), the view tree can be loaded or unloaded dynamically.

The view tree and the component tree do not correspond one to one:

A view embedded in the context of a specified view tree may also be a host view for other components

The component may be in the same NgModule as the host component, or it may belong to another NgModule

Components, templates, views and modules

In Angular, you can define the view of a component through its supporting template. A template is a HTML that tells Angular how to render the component.

Views are usually organized hierarchically, allowing you to modify, show, or hide on a UI partition or page basis. The template directly associated with the component defines the host view of the component. The component can also define a hierarchical view that contains some embedded views as hosts for other components.

Hierarchical views can contain views of components in the same module (NgModule), or (and often will) contain views of components defined in other modules.

This is the end of the article on "what are the definitions related to views in Angular?" Thank you for reading! I believe you all have some knowledge of "what are the definitions related to views in Angular". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.