如何在我的项目中使角度材料 DIALOG 可共享？答案

【问题标题】：how to make angular material DIALOG Shareable in my project?如何在我的项目中使角度材料 DIALOG 可共享？
【发布时间】：2019-10-19 04:57:55
【问题描述】：

我制作了一个有角度的材质对话框，它以要在对话框中打开的输入组件名称作为输入。我想让这个输入意味着这个对话框应该是可共享的，并且在我的项目中的任何地方，任何人都可以使用它。这里的对话框是一个单独的模块，客户是一个单独的模块。提前致谢。

我试过关注一个，但我不知道如何动态传递组件名称。

customer.component.html
<div>
  <app-model ></app-model>
</div>

model.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { MatDialog } from '@angular/material';
import { CustomerResponsblitiesComponent } from 'app/customer/Customer- 
responsblity/customer-responsblities/customer-responsblities.component';
@Component({
  selector: 'app-model',
  templateUrl: './model.component.html',
  styleUrls: ['./model.component.scss']
})
export class ModelComponent implements OnInit {
  @Input() ComponetoTobeLoad:any;
  constructor(public dialog: MatDialog) { }

  ngOnInit() {

  }
  ngAfterViewInit() {
    setTimeout(() 
  =>this.openDialog(CustomerResponsblitiesComponent));//here i want to 
  pass my component dynamically.
    console.log(this.ComponetoTobeLoad+"abc");
  }
  openDialog(component): void {
    const dialogRef = this.dialog.open(component, {
       width: '500px',
    dialogRef.afterClosed().subscribe(result => {
    });
  }

我想动态使用pass组件名来建模，想打开对话框。

【问题讨论】：

我将把它放在一个单独的组件中，然后我将在服务中创建一个变量，它现在是一个行为主题，这取决于谁在使用 modelComponent，设置行为主题和 modelCopoment 听行为主体可观察

标签： angular dynamic dialog angular-material angular7

【解决方案1】：

有时您在开发 Angular 时尝试动态生成组件。在常见的弹窗情况下，我只是做了一个组件并将其用作选择器，但我知道还有另一种方法。如何使用 ComponentFactoryResolver。

https://github.com/paige0701/angular-view-containerRef

我在 Github 中找到了你想要的示例代码！

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[MessageComponent] // 여기서 messageComponent를 넣어줘야한다.
})
export class AppComponent {
  title = 'app';

  @ViewChild('messagecontainer', {read: ViewContainerRef})
  entry: ViewContainerRef;

  constructor(private resolver : ComponentFactoryResolver) {

  }

  createComponent(title: string) {

    // 1. clear container
    this.entry.clear();

    // 2. Create a factory for messageComponent
    const factory = this.resolver.resolveComponentFactory(MessageComponent);

    // 3. Create component using factory
    const componentRef = this.entry.createComponent(factory);

    // 4. Pass value for @Input properties using component reference instance method
    componentRef.instance.message = title;

  }
}

【讨论】：