Use examples of NgTemplateOutlet instructions in Angular6.x

When using Angular development, the property binds to the internal passage of the component, sometimes it is sometimes fully met, for example, we wrote a public component, but a template uses this public component, It is necessary to add some tag content inside. In this case, in addition to using NGIF / NGSWITCH in advance in the component inside the component, the NgTemplateOutlet instruction can be used to incoming content to the component.

ngTemplateOutlet instruction is similar to AngularJS NG-TransClude, Vuejs Slot.

ngTemplateOutlet is a structural instruction, which needs to be bound to an instance of a TemplateRef type.

The way of use is as follows:

 @component ({Selector: 'App', Template: ` Angular's Template Outlet and LifeCyle Example 

Hello {{name}}! `,}) export class app {} @component ({selector: 'app-content", template: ` Toggle Content Hello World! `,}) Export Class NestedComponent Implements OnDestroy, OnInit {Ngoninit () {Alert (' App-Nested-Component Initialized! ');} ngondestroy () {ALERT ('App-Nested-Component Destroyed!');}} In addition to the two components defined outside the component
Container Components: App-Content

Passing Content Components: App-Nested-Component

  1. APP-Content Components Receive a TemplateRef type input attribute Templateref, and The template is bound to the NgTemplateOutlet instruction. When the component receives the templateref property, it will be rendered to the location where the NgTemplateOutlet instruction is located.
  2. In the above example, the source of the App-Content Component TemplateRef property is In the template of the root assembly, it is directly included in the
  3. of the App-Nested-Component component directly through the # symbol.
In the actual application, in addition to this, it can be directly The components can get the properties of the TemplateRef type and bind to NgTemplateOutlet instructions.

In the case where the container component is a modal frame, it cannot pass the template value, and it can be used:

@ViewChild (‘Temp ‘) Temp: TemplateRef

OpenDialog () { (ViewDialogComponent, {data: this.temp)}

In the container assembly Define the context that is transmitted (the MyContext property in the previous example app-content component), where the $ Implicit property is used as the default value, and can be accessed in a renamed manner in the transmitted content, for Other properties in the context need to be accessed through the let-attribute name.
The above is all the contents of this article, I hope everyone can help everyone, I hope everyone will support Tumi Cloud. .
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment