Строковая интерполяция для углового HTML-селектора

Question

У меня есть много компонентов с различными селекторами, такими как протокол приложения, проверка приложения, общее представление приложения и т. Д. Я хочу, чтобы отображаемый компонент основывался на переменной, например:

В машинописном тексте

view = 'protocol'; // or inspection or generalview

В HTML

<app-{{view}}> </app-{{view}}>

или

<div [innerHTML] = "'<app-{{view}}>'"> </div>

Однако оба примера HTML не работают. Я знаю, что могу использовать * ngSwitch, но у меня может быть много случаев, и я хотел бы знать, есть ли способ избежать этого. Большое спасибо.

Answer 1

Вы можете рендерить динамически компонент, используя componentFactoryResolver и viewContainerRef.

Вот простой пример, я создал компонент с именем Cmp1Component, который будет рендериться динамически.

App.module.ts

@NgModule({
  declarations: [
    AppComponent,
    Cmp1Component,
    Cmp2Component
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents:[
    Cmp1Component
  ]
})
export class AppModule { }

App.component.html

A component will be rendered down here:
<div #placeholder></div>

App.component.ts

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
import { Cmp1Component } from './cmp1/cmp1.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public done = false;
  @ViewChild("placeholder", {read: ViewContainerRef}) placeholderRef: ViewContainerRef;
  constructor(
    public viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver

  ) {
  }

    ngAfterViewChecked(): void {
      if(!!this.placeholderRef && !this.done){
        this.done = true;

        const factory = this.componentFactoryResolver.resolveComponentFactory(Cmp1Component);
        const componentRef = this.placeholderRef.createComponent(factory);
        componentRef.changeDetectorRef.detectChanges();
      }
    }

}

Результат:

Одна вещь : вам может не потребоваться ввод логики в цикл ngAfterViewChecked.Я сделал эту логику, чтобы показать вам, как она работает.Если вы фактически поместите код в функцию, которая будет выполняться при визуализации всего, то вы точно знаете, что placeHolderRef не равно нулю или не определено.