Angular Add Component Quality by Directive

The public components written before, they will introduce first. When they need to be transferred, the public component status, value, and callback function will be controlled by service. But there are some scenes that are not suitable for this way, or dynamically add components better. Summary by a small component written.

Creating a component

Scene: When the mouse is moved onto the icon, the explanatory description text is displayed. Then you need to create a normal Tooltip component. As:

Import {Component, OnInit} from ‘@ Angular / Core’; @ Component ({Selector: ‘App-Hovertip’, TemplateURL: ‘./hovertip.component.html’, Styleurls: [‘ ./hovertip.component.scss’]} )Export Class HovertiPComponent Implements Oninit {Public Tiptext: String; Constructor () {} ngoninit () {}}
.hover-tip-wrapper {width: max-content; position: absolute; height: 30px; line-height: 30px; bottom: CALC (100% + 5px); Right: Calc (-10px – 100%); Background-COlor: RGBA (# 000000, .8); Padding: 0 5px; Border-Radius: 3px; & :: after {content: ‘; position: absolute; height: 0; width: 0; border: 4px solid transparent; Border-top-color: RGBA (# 000000, .8); Left: 10px; Top: 100%;} span {color: #ccc; font-size: 12px;}}
A very simple component, Tiptext to receive the text that needs to be displayed.
 Need not to note that when the component is declared, in addition to the need to add to the Declarations, I still remember to add to the entrycomponents.   
Entrycomponents: [HOVERTIPComponent], Declarations: [HovertipComponent, HovertipDirective]

That entrycomponents this configuration item is What? See the source code annotation, it means: Angular creates a ComponentFactory for the components in this configuration item and stores in the ComponentFactoryResolver. When dynamically adding components, you need to use the component factory, so this configuration is essential.

Creating instructions
   Binding events for the target element, controlling component, transmitting TipText, and components. 

import {Input, Directive, ViewContainerRef, ComponentRef, ComponentFactory, HostListener, ComponentFactoryResolver} from ‘@ angular / core’; import {HovertipComponent} from ‘./hovertip.component’; @ Directive ({selector: ‘ [appHovertip] ‘}) export class HovertipDirective {public hovertip: ComponentRef

; public factory: ComponentFactory Angular通过指令动态添加组件问题; constructor (private viewContainer: ViewContainerRef, private resolver: ComponentFactoryResolver) {// Get the corresponding components of the plant this.factory = this.resolver.resolveComponentFactory (HovertipComponent);} @Input ( ‘appHovertip’) tipText: string; // bind mouse event @HostListener engraftment ( ‘mouseenter’) onmouseenter () {// Clear all view this.viewContainer. CLEAR (); // Create a component this.hovertip = this.viewContainer.createComponent (this.Factory); // Transfer to the component instanceThe number this.hovertip.instance.tiptext = this.tiptext;} // Bind the event @HostListener (‘mouseeleave’) onmouseeleave () {if (this.hovertip) {// component destroy this.hovertip.destroy ();}}}

Managing views through the ViewContainerRef class, where creating components are used. This column is quite clear. Here is the following two APIs, clear and created.

The CreateComponent method accepts the ComponentFactoty class, and the ComponentRef class returned after creating can get the component instance (instance), the control component is destroyed.

 The rough idea is such that the HovertipComponent component is first obtained for the ComponentFactory for the HOVERTIPComponent component, listens to the mouse to move into the event. When triggering the event, create a component via the ViewContainerRef class, save the return Component Componentref (getting instance, you need to use it when you destroy the component), pass Tiptext to the component instance. Listening to the mouse shift event, destroy the component when the event is triggered.    Use  
to be a binding instruction while transmitting Tiptext simultaneously.

can be created and destroyed normally. Angular通过指令动态添加组件问题



When doing, it is mainly compared to these classes, viewcontainerref, company CompoNNTFACTORY, ComponentFactoryResolver, etc., look at the source code, check the information, will always sort out.

Reference: HTM

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment