Angular 4 如何使用 NgComponentOutlet 将数据传递到动态组件中答案

【问题标题】：Angular 4 how to pass data into dynamic component with NgComponentOutletAngular 4 如何使用 NgComponentOutlet 将数据传递到动态组件中
【发布时间】：2017-08-27 13:46:27
【问题描述】：

我发现了这个类似的问题。 angular 4+ assign @Input for ngComponentOutlet dynamically created component

但是已经一个月了。有什么变化吗？

基本上，我按照本指南创建了一个动态组件：https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

通过这种方法，我可以为动态组件分配一个值： (<AdComponent>componentRef.instance).data = adItem.data;

我仍然无法使用开箱即用的 NgComponentOutlet 为动态组件分配值吗？ (https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html)

【问题讨论】：

在询问之前您至少尝试过吗？如果是这样，结果或错误是什么？
是的。我无法
解决方法是在组件中使用服务。有一个创建事件的建议。问题在这里github.com/angular/angular/issues/15360 和这里github.com/angular/angular/pull/15362。

标签： angular angular4

【解决方案1】：

你可以像这样传入一个自定义注入器 - https://github.com/angular/angular/issues/16373#issuecomment-306544456

这是一种 hack，所以我们最终使用了这个库-

https://www.npmjs.com/package/ng-dynamic-component

工作就像一个魅力！

【讨论】：

【解决方案2】：

就我而言，我在组件中使用 ngBaseDef.inputs.data。

查看示例：


import {Component, Injectable, Input} from '@angular/core';
import {NgbActiveModal, NgbModal} from "@ng-bootstrap/ng-bootstrap";
import {ExampleComponent } from "../components/modals/moder-info/example.component";


@Component({
  selector: 'modal-template',
  template: `
    <div class="modal-header">
      <h4 class="modal-title" [innerText]="title"></h4>
      <button type="button" class="close" aria-label="Close" (click)="close()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <ng-content *ngComponentOutlet="childComponent;"></ng-content>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="close()">Close</button>
    </div>
  `
})
export class ModalTemplate {
  @Input() title;
  @Input() onClose;
  @Input() childComponent;

  constructor(public activeModal: NgbActiveModal) {}

  close() {
    this.activeModal.dismiss('close');
    this.onClose();
  }
}

export interface ModalServiceOptions {
  data: any;
  title: string
  onClose: any,
  componentName: string
}


@Injectable({
  providedIn: 'root'
})
export class ModalService {
  constructor(private mService: NgbModal) {}

  open(options: ModalServiceOptions) {
    let types = {'example': ExampleComponent };
    let modal = this.mService.open(ModalTemplate, {size: 'lg'});

    modal.componentInstance.title = options.title;
    modal.componentInstance.onClose = options.onClose;

    let component = types[options.componentName];

    component.ngBaseDef.inputs.data = options.data;
    modal.componentInstance.childComponent = types[options.componentName];
  }
}

示例组件

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

@Component({
  selector: 'example-component',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.sass']
})
export class ExampleComponent implements OnInit {
  @Input() data;

  constructor() {
    let dataOfConstructor: any = this.constructor;
    let data = dataOfConstructor.ngBaseDef.inputs.data;
    console.log('data:', data); // Here is my data, i injected it above
  }

  ngOnInit() {
  }

}

祝你有美好的一天！希望对您有所帮助！

【讨论】：