How does angular6 use ngContentOutlet to implement component position exchange (code example)

The content of this article is about how angular6 uses ngContentOutlet to implement component position exchange (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Introduction to the ngContentOutlet directive

The ngContentOutlet directive is similar to the ngTemplateOutlet directive, and both are used for dynamic components. The difference is that the former passes in a Component, and the latter passes in a TemplateRef.

First look at the usage:

MyComponent is our custom component. This instruction will automatically create a component factory and create a view in ng-container.

Realize component position exchange

The view in Angular is bound to data. It does not recommend that we directly operate HTML DOM elements, and recommends that we change the component view by manipulating data.

First define two components:

button.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-button',
 template: `<button>按钮</button>`,
 styleUrls: ['./button.component.css']
})
export class ButtonComponent implements OnInit {
 constructor() { }
 ngOnInit() {

text.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
 selector: 'app-text',
 template: `
 <label for="">{{textName}}</label>
 <input type="text">
 `,
 styleUrls: ['./text.component.css']
})
export class TextComponent implements OnInit {
 @Input() public textName = 'null';
 constructor() { }
 ngOnInit() {
 }
}

We dynamically Create the above two components and implement the position exchange function.

Dynamicly create components and implement position exchange

We first create an array to store the two components ButtonComponent and TextComponent created above. When exchanging positions, we only need to swap the components in the array The position in , the code is as follows:

import { TextComponent } from './text/text.component';
import { ButtonComponent } from './button/button.component';
import { Component } from '@angular/core';
@Component({
 selector: 'app-root',
 template: `
 <ng-container *ngFor="let item of componentArr" >
  <ng-container *ngComponentOutlet="item"></ng-container>
 </ng-container>
 <br>
 <button (click)="swap()">swap</button>
`,
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 public componentArr = [TextComponent, ButtonComponent];
 constructor() {
 }
 public swap() {
  const temp = this.componentArr[0];
  this.componentArr[0] = this.componentArr[1];
  this.componentArr[1] = temp;
 }
}

The above is the detailed content of How does angular6 use ngContentOutlet to implement component position exchange (code example). For more information, please follow other related articles on the PHP Chinese website!