Angular6 открыть/показать компонент по сервису

Я создал угловой компонент для использования в качестве диалогового окна для моего приложения (например, для отображения ошибок приложения) и диалоговую службу service для открытия/отображения этого диалогового окна из других компонентов.

dialog.component.html

<kendo-dialog *ngIf="opened">
  <div>
    Some Content
  </div>
</kendo-dialog>

диалог.компонент.тс

import { Component, OnInit } from '@angular/core';
import { Dialog } from './dialog'; // Model

@Component({
  selector: 'dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {
  public opened = false;
  public dialog: Dialog; // Contains properties like title, message

  constructor() {
  }

  ngOnInit() {}

  public showDialog(dialog: Dialog) {
    this.dialog = dialog;
    this.opened = true;
  }
}

диалог.service.ts

import { Injectable } from '@angular/core';
import { Dialog } from './dialog';

@Injectable()
export class DialogService {
  constructor() {}

  public showDialog(
    title: string,
    message: string,
    isConfirm: boolean,
    icon?: string
  ) {
    const dialog = new Dialog(title, message, isConfirm, icon);

    // TODO: Open/Show Dialog Component with DialogService
    // set opened property from DialogComponent = true
  }
}

Что мне нужно сделать в DialogService, чтобы иметь возможность показывать свой DialogComponent из любого места? Например, у меня где-то есть блок try/catch, и я хочу показать сообщение об ошибке с помощью DialogComponent:

try {
// Do something
} catch(error => {
    this.dialogService.showDialog('Title', error.Message, true);
})

angular components angular6 kendo-ui kendo-window
person AlphaDeveloper    schedule 12.09.2018    source источник
comment
Что значит из любого места? если вы хотите использовать компонент, просто вызовите его селектор где угодно <dialog #dialog></dialog><button (click)="dialog.open();"></button> что-то вроде этого   -  person SlimenTN    schedule 12.09.2018
comment
Я имею в виду использовать его, например, в обработчике ошибок и в блоке catch, я могу показать это примерно так: catch(error => { this.dialogService.showDialog('ErrorTitle', error.Message'); })   -  person AlphaDeveloper    schedule 12.09.2018
comment
вы можете использовать свой компонент где угодно, просто вызвав его селектор и добавив к нему имя шаблона, чтобы вы могли использовать его в блоке try catch или любом другом блоке.<dialog #dialog></dialog> и внутри компонента @ViewChild('dialog') dialog: MyDialogComponent; и, наконец, catch(error => { this.dialog.showDialog('ErrorTitle', error.Message'); })   -  person SlimenTN    schedule 12.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вам следует использовать Angular CDK Overlay.

Это позволяет вам создать фон с определенной непрозрачностью, динамически вставлять компонент поверх него и настраивать стратегию положения и стратегию прокрутки.

Позвольте мне предоставить вам код, который может помочь вам начать работу:

constructor(
   private overlay: Overlay,
   private componentFactoryResolver: ComponentFactoryResolver
) {}

let componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);

const overlayRef = this.overlay.create(
  {
    hasBackdrop: true,
    positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()
  }
);

overlayRef.backdropClick().subscribe(res => {
  overlayRef.detach();
});

let portal = new ComponentPortal(componentFactory.componentType);

let component = overlayRef.attach<DialogComponent>(portal);

component.instance.onCloseClick.subscribe(() => {
  overlayRef.detach();
});
person Guerric P    schedule 12.09.2018