Question

我创建了一个角形材质对话框，该对话框将作为输入组件名称，该名称将在对话框中打开。我要使其成为输入，这意味着该对话框应该是可共享的，并且在我项目的任何地方，任何人都可以使用它。在这里，对话框是一个单独的模块，而客户是一个单独的模块。预先感谢。

我尝试了以下方法，但没有获得如何动态传递组件名称的方法。

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 => {
    });
  }

我想动态使用传递组件名称进行建模并希望打开对话框。

Answer 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;

  }
}

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

1 个答案: