angular - 获取ngComponentOutlet的引用

我正在用ngComponentOutlet动态创建一个组件。
听起来好像:

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'alert-success',
  template: `
    <p>Alert success</p>
  `,
})
export class AlertSuccessComponent {  }

@Component({
  selector: 'alert-danger',
  template: `
    <p>Alert danger</p>
  `,
})
export class AlertDangerComponent {
  test = 'danger...';
}

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular version 4</h1>
    <ng-container *ngComponentOutlet="alert"></ng-container>
    <button (click)="changeComponent()">Change component</button>
  `,
})
export class App {
  alert = AlertSuccessComponent;

  changeComponent() {
    this.alert = AlertDangerComponent;
    alert(this.alert.test);       <-- ???????
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, AlertSuccessComponent, AlertDangerComponent ],
  entryComponents: [AlertDangerComponent, AlertSuccessComponent],
  bootstrap: [ App ]
})
export class AppModule {}

在changeComponent()中，我尝试(天真地猜到)获取当前组件的引用以向其提供数据，但是它失败了:(

我是否必须使用ViewContainerRef，如何使用？

最佳答案

您必须将组件名称直接放在此处:

<ng-container *ngComponentOutlet="AlertDangerComponent;
            ngModuleFactory: alertDangerModule;"></ng-container>

我随意添加了Module，用于当您从不同于当前Module的Module渲染组件时使用。

另外，要使用“模块”选项，您将需要在当前组件中使用它:

private alertDangerModule: NgModuleFactory<any>;

constructor(private compiler: Compiler) {
      this.alertDangerModule = compiler.compileModuleSync(AlertDangerModule);
}

如果您只想从当前模块中加载1个组件，则需要执行以下操作:

<ng-container *ngComponentOutlet="AlertDangerComponent"></ng-container>

NgComponentOutlet

导入模块:NgModuleFactory

更新(动态):

创建一个向量，例如:

import AlertDangerComponent from './path';
import AlertSuccessComponent from './path';

export const MY_ALERTS = {
    'alertDanger': AlertDangerComponent,
    'alertSuccess': AlertSuccessComponent,
};

在您的组件中，导入MY_ALERTS，您可以呈现与MY_ALERTS一样多的组件。

或者您可以尝试通过创建新的ng-container动态渲染它(尚未对此进行测试)。

我正在使用它从巨大的向量中渲染组件，该向量包含具有其他值(例如 bool 值)的组件类，因此我知道每次加载哪个组件。

要渲染此向量内的组件，您可以:

<div *ngFor="let alert of MY_ALERTS | keys">
        <ng-container *ngComponentOutlet="MY_ALERTS[alert];
                 ngModuleFactory: commonAlertsModule;"></ng-container>
</div>

其中keys只是一个@Pipe，它向我返回对象的键(而不是值)。

更新(替代方法):

我在想，也许您可​​能会对这种其他方法感兴趣:将@Component用作“指令”。我会自我解释:

使用选择器之类的指令声明您的组件:

@Component({
  selector: '[alert-success]',
  template: `
    <p>Alert success</p>
  `,
})
export class AlertSuccessComponent {  }

@Component({
  selector: '[alert-danger]',
  template: `
    <p>Alert danger</p>
  `,
})
export class AlertDangerComponent {
  test = 'danger...';
}

然后，您可以根据情况调用一个或另一个:

@Component({
  selector: 'my-app',
  template: `
    <h1>Angular version 4</h1>
    <div *ngIf="alertDanger" alert-danger></div>
    <div *ngIf="alertSuccess" alert-success></div>
    <button (click)="changeComponent()">Change component</button>
  `,
})
export class App {
  alertSuccess = true;
  alertDanger = false;

  changeComponent() {
    this.alertSuccess = !this.alertSuccess;
    this.alertDanger = !this.alertDanger;
  }
}

在我的示例中(尽管未测试)，我初始化了成功警报。单击时，应将alertSuccess设置为false，并将alertDanger设置为true。

关于angular - 获取ngComponentOutlet的引用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44584649/