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

Posted 2023-05-08

【中文标题】如何在我的项目中使角度材料 DIALOG 可共享？

【英文标题】：how to make angular material DIALOG Shareable in my project?

【发布时间】：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 听行为主体可观察

【参考方案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;