как сделать угловой материал ДИАЛОГ в моем проекте? - PullRequest
Новая
       20

как сделать угловой материал ДИАЛОГ в моем проекте?

0 голосов
/ 03 июня 2019

Я сделал диалоговое окно с угловым материалом, которое принимает в качестве имени входного компонента, который должен быть открыт в диалоге. Я хочу сделать так, чтобы этот ввод означал, что это диалоговое окно должно быть общедоступным и где угодно в моем проекте, любой может его использовать. Здесь диалог - это отдельный модуль, а клиент - это отдельный модуль. Заранее спасибо.

Я попробовал следующий, но я не понимаю, как передать имя компонента динамически. 

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

Я хочу динамически использовать имя компонента передачи для моделирования и хочу открыть диалоговое окно.

1 Ответ

0 голосов
/ 04 июня 2019

Иногда вы пытаетесь динамически генерировать компоненты при разработке 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;

  }
}
...