Angular6 按服务打开/显示组件 [英] Angular6 open/show component by service
问题描述
我构建了一个 Angular 组件,用作我的应用程序的对话框(例如,显示应用程序错误)和一个对话框-服务,用于从其他组件打开/显示该对话框.
dialog.component.html
<div>部分内容
</kendo-dialog>
dialog.component.ts
import { Component, OnInit } from '@angular/core';从'./dialog'导入{对话框};//模型@成分({选择器:'对话框',templateUrl: './dialog.component.html',styleUrls: ['./dialog.component.scss']})导出类 DialogComponent 实现 OnInit {公开开放=假;公共对话:对话;//包含标题、消息等属性构造函数(){}ngOnInit() {}公共 showDialog(对话:对话){this.dialog = 对话;this.opened = true;}}
dialog.service.ts
import { Injectable } from '@angular/core';从'./dialog'导入{对话框};@Injectable()导出类 DialogService {构造函数(){}公共显示对话框(标题:字符串,消息:字符串,isConfirm:布尔值,图标?:字符串){const dialog = new Dialog(title, message, isConfirm, icon);//TODO: 使用 DialogService 打开/显示对话框组件//从 DialogComponent = true 设置打开的属性}}
我需要在 DialogService 中做什么才能从任何地方显示我的 DialogComponent?例如,我在某处有一个 try/catch 块,并想用 DialogComponent 显示错误消息:
尝试{//做点什么} 抓住(错误=> {this.dialogService.showDialog('Title', error.Message, true);})
你应该使用 Angular CDK 叠加.
它允许您创建具有一定不透明度的背景,在其上动态注入组件,并配置位置策略和滚动策略.
让我为您提供一些可以帮助您入门的代码:
构造函数(私人叠加:叠加,私有 componentFactoryResolver: ComponentFactoryResolver) {}让 componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);const overlayRef = this.overlay.create({hasBackdrop:真实,positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically()});overlayRef.backdropClick().subscribe(res => {overlayRef.detach();});让门户 = 新的 ComponentPortal(componentFactory.componentType);let component = overlayRef.attach(portal);component.instance.onCloseClick.subscribe(() => {overlayRef.detach();});
I built an angular component to use as a dialog for my app (e.g to show application errors) and a dialog-service to open/show that dialog from other components.
dialog.component.html
<kendo-dialog *ngIf="opened">
<div>
Some Content
</div>
</kendo-dialog>
dialog.compontent.ts
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;
}
}
dialog.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
}
}
Whats do I need to do in DialogService to be able showing my DialogComponent from anywhere? For example I have a try/catch block somewhere and want to show the error message with DialogComponent:
try {
// Do something
} catch(error => {
this.dialogService.showDialog('Title', error.Message, true);
})
Your should use the Angular CDK Overlay.
It allows you to create a backdrop with a certain opacity, to dynamically inject a component over it, and to configure the position strategy and scroll strategy.
Let me provide you some code that may help you get started:
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();
});
这篇关于Angular6 按服务打开/显示组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!