Question

如何根据从数据库中获取的数据更改组件？
我正在使用这样的东西：stackblitz
但是根据用户角色显示工具。（数据库返回哪些工具，订购等等）

我可以通过两种方式思考如何做到这一点：

第一
使用*ngIf之类的：

<div class="tools-wrapper controls">
  <div class="tools-container">
    <app-tool-menu *ngIf="existsInData('menu')"></app-tool-menu>
    <mat-divider *ngIf="existsInData('menu')"></mat-divider>
    <app-tool-refresh *ngIf="existsInData('refresh')"></app-tool-refresh>
    <app-tool-info *ngIf="existsInData('info')"></app-tool-info>
    <app-tool-edit *ngIf="existsInData('edit')"></app-tool-edit>
  </div>
</div>

这不够动态。

第二使用factoryResolver

@Injectable()
export class InjectorService {
  constructor(private factoryResolver: ComponentFactoryResolver) { }

  setRootViewContainerRef(viewContainerRef) {
    this.rootViewContainer = viewContainerRef;
  }

  addDynamicComponents(data: any[]) {
    const component = factory.create(this.rootViewContainer.parentInjector);

    data.forEach((tool) => {
      const toolComponent = this.toolMapping(tool);
      const factory = this.factoryResolver.resolveComponentFactory(toolComponent);
      this.rootViewContainer.insert(component.hostView);
    });
  }

  toolMapping(tool) {
    const tools = {
      'menu': MenuComponent,
      'refresh': RefreshComponent,
      'info': InfoComponent,
      'edit': EditComponent,
    };
    return tools[tool];
  }
}



@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1> 
    <ng-template #dynamic></ng-template>
  `
})
export class AppComponent implements OnInit {
  name = 'from Angular';

  @ViewChild('dynamic', { read: ViewContainerRef }) 
  viewContainerRef: ViewContainerRef;

  constructor(private service: InjectorService ) {}

  ngOnInit() {
    this.service.setRootViewContainerRef(this.viewContainerRef);
    this.service.addDynamicComponents(.. data ..);
  }
}

这段代码中有很多开销，比如为我拥有的每个类似构造定义一个toolMapping或创建一个Service。

是否有更好更清洁的解决方案？

数据看起来像这样（必要时可以修改）：

[
  {type: 'menu', tooltip: '', ...},
  {type: 'divider', tooltip: '',...},
  {type: 'refresh', tooltip: '', ...},
  {type: 'info', tooltip: '',...},
  {type: 'edit', tooltip: '',...},
]

Answer 1

如何将<ng-container>与ngComponentOutlet一起使用？它比ComponentFactoryResolver解决方案简单得多。

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

import { AComponent } from './a.component';
import { BComponent } from './b.component';
import { CComponent } from './c.component';

@Component({
  selector: 'my-app',
  template: `
    <input type="radio" value="A" name="comp" [(ngModel)]="radioValue"> A
    <input type="radio" value="B" name="comp" [(ngModel)]="radioValue"> B
    <input type="radio" value="C" name="comp" [(ngModel)]="radioValue"> C

    <ng-container [ngComponentOutlet]="selected"></ng-container>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  radioValue: 'A' | 'B' | 'C';

  get selected() {
    switch (this.radioValue) {
      case 'A': {
        return AComponent
      }
      case 'B': {
        return BComponent
      }
      case 'C': {
        return CComponent
      }
    }
  }
}

Live demo

Answer 2

在AngularJS中，只能通过组件标记编译组件，如： <comp></comp>如果它是字符串。

但是在新的Angular中，遗憾的是还没有。我观看了ComponentFactoryResolver，ngComponentOutlet API＆＃39}。他们只接受Type<T> resolveComponentFactory ，其中T是某个组件/指令......类。

因此，您无法将组件选择器作为字符串传递。

作为解决方案类型：

创建Map<string, any>()。 key - 类型，any - 组件类型

并在模板中迭代数据：

<ng-container  *ngFor="let itm of data">
    <ng-container *ngComponentOutlet="someMap.get(itm.type)"> 
    </ng-container>
</ng-container>

创建方法getComponentType(type: string)。这里有一些搜索逻辑。的模板：

<ng-container *ngFor="let itm of data"> <ng-container *ngComponentOutlet="getComponentType(itm.type)"> </ng-container> </ng-container>

基于数据的不同ChildComponent

2 个答案: