アングラー6は、コンポネントOutletを利用してコンポーネント位置交換(再配置)を実現します.

ngContentOutletコマンド紹介ngContentOutletコマンドとngTemplateOutlet命令は同様で、いずれも使用されます.
ダイナミックコンポーネントとは、異なるのは、
前者が伝わったのは一つです.Component、後者が入ってきたのは一つです.TemplateRefまず使ってみます.

MyComponentは、私たちがカスタマイズしたコンポーネントです.このコマンドは自動的にコンポーネント工場を作成し、ng-containerにビューを作成します.
コンポーネント位置交換を実現
アングラーの中のビューはデータと結合されています.HTML DOM要素を直接操作することを勧めていません.データを操作する方法でコンポーネントビューを変えることを勧めています.
最初に二つのコンポーネントを定義します.button.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `  `,
  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: `
  {{textName}}
  
  `,
  styleUrls: ['./text.component.css']
})
export class TextComponent implements OnInit {
  @Input() public textName = 'null';
  constructor() { }

  ngOnInit() {
  }

}

下のコードにおいて、上記二つのコンポーネントを動的に作成し、位置交換機能を実現します.
動的にコンポーネントを作成し、位置交換を実現します.
まず、上記で作成した2つのコンポーネントを保存するための配列を作成します.ButtonComponentとTextComponent、位置交換の場合は、配列内のコンポーネントの位置を交換するだけでいいです.コードは以下の通りです.

import { TextComponent } from './text/text.component';
import { ButtonComponent } from './button/button.component';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  
    
  
  

  swap
`,
  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;
  }
}

実行コマンドnpm startは、ブラウザで以下のような効果を見ることができる.