获取ngComponentOutlet的参考 [英] Getting reference of ngComponentOutlet

问题描述

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

I'm creating dynamically a component with ngComponentOutlet. Sounds like:

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（）中，我尝试（天真地想）获取当前组件的引用以向其提供数据，但是它失败了：（

In changeComponent(), I try (naively I guess) to get the reference of the current component to feed it with data, but it failed :(

我必须使用ViewContainerRef吗？

Should I have to use ViewContainerRef, how?

推荐答案

您必须直接在其中放置组件名称：

You have to put the component name directly there:

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

我随意添加了Module，用于渲染组件时

I took the liberty to add the Module, is used for when you render a component from a Module different from the current Module.

此外，要使用模块选项，您需要在您当前的组件中：

Also, for using the Module option, you'll need this in your current component:

private alertDangerModule: NgModuleFactory<any>;

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

如果您只想从当前模块中加载1个组件，这就是您要执行的操作需要做的事情：

If you just want to load 1 component from current Module, this is what you need to do:

<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 一样多的组件。

In your component, you import MY_ALERTS, and you could render as many components as MY_ALERTS has.

或者您也可以尝试通过创建新的 ng-container （不是

Or you could try render it dynamically, by creating a new ng-container (Haven't test this yet).

我正在使用它从巨大的向量中渲染组件，该向量包含具有其他值（例如布尔值）的组件类，因此我知道哪个组件

I'm using this to render components from a huge vector containing component classes with other values such as booleans so I know which component to load each time.

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

To render a component that is inside this vector you can:

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

键只是 @Pipe 会向我返回对象（而不是值）的键。

Where keys is just a @Pipe that returns me the keys of an object (instead of the value).

更新（替代方法）：

我在想，您可能会对另一种方法感兴趣：将@Component用作 指令 。我会自我解释：

I was thinking that maybe you could be interested on this other approach: Use a @Component as a 'Directive'. I'll explain myself:

使用伪指令之类的选择器声明组件：

@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...';
}

然后，您可以视情况呼叫一个或另一个：

Then, you just call one or the other, depending on occasion:

@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 。

In my example (not tested though) I initialize the Success Alert. On click, It should set alertSuccess as false and set alertDanger as true.

这篇关于获取ngComponentOutlet的参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！