angular5+webpack使用Dialog遇到的坑

小鱼儿 2022-05-31 03:45 174阅读 0赞

趁热乎来写一下关于angular5+webpack3使用angular material组件Dialog遇到的坑

1.如果需要【弹出框】交互数据，必须在同一个typeScript注册组件，这样才能接收主组件传参。如下：

![SouthEast][]

![SouthEast 1][]

导入包：

import \{ OnDestroy, OnInit, Component, Input, Inject \} from '@angular/core';

import \{ MatDialog, MAT\_DIALOG\_DATA, MatDialogRef \} from '@angular/material';

构造方法：

public dialog : MatDialog,

传数据方法：

let dialogRef= this. dialog. open( DialogComponent,\{

width: '640px',

data:\{ name: 'aName'\},

disableClose: true,

\});

dialogRef. afterClosed(). subscribe( result =>\{

console. log( result);

\})

接收数据方法，在弹出框组件：

constructor(

@ Inject( MAT\_DIALOG\_DATA) public data: any,

)\{\}

2.(可选)如果在Module里面做全局设置，（以下是设置点击弹出框以外的地方会隐藏弹出框），这里需要单独声明一个providers。不然会出现弹出框没有模态。啊啊啊！（亲测）

![SouthEast 2][]

在declarations、providers、entryComponents声明弹出框组件就OK了。以上

![SouthEast 3][]

\------------------------------------------------完-------------------------------------------------

[SouthEast]: /images/20220531/e2675aaa848346d181bf70b48e5e7fd1.png
[SouthEast 1]: /images/20220531/537f41c9d4b14126b4a17d6a7c3f3cda.png
[SouthEast 2]: /images/20220531/fff787cf8cae4100ab9bb53a983dfb36.png
[SouthEast 3]: /images/20220531/0196c3bd23384b77b6716b27f841dc2e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关使用webScoket遇到的坑

在使用webScoket遇到个这个问题：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

淡淡的烟草味﹌/ 2023年06月11日 03:28/ 0 赞/ 42 阅读

相关详解HTML5 录音遇到的坑

本文恩主要介绍了详解HTML5 录音的踩坑之旅，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。 [web前端全栈资料粉丝福利（

素颜马尾好姑娘i/ 2023年02月18日 03:21/ 0 赞/ 4 阅读

相关 webpack5.x 遇到的问题

更新问题1 `异常：Compiling RuleSet failed: Exclamation mark separated loader lists has been re

╰半橙微兮°/ 2022年12月22日 09:25/ 0 赞/ 99 阅读

相关 Webpack5 踩坑之（html-webpack-plugin）

2021 开工第一天就给我个大大的惊喜。 ERROR in Error: The loader "/home/project/vue3-demo/node_mod

秒速五厘米/ 2022年10月30日 07:27/ 0 赞/ 277 阅读

相关升级webpack5过程中遇到的坑

将项目的weback从3升到了5，遇到了一系列的问题，这里记录两个： 1. extract-text-webpack-plugin兼容问题 2. webpack-dev-

忘是亡心i/ 2022年10月27日 15:49/ 0 赞/ 485 阅读

相关使用version遇到的那些坑

公司代码管理使用的SVN, 所以就用到了SVN工具version 公司没给买正版的version, 遇到各种崩溃, 各种坑 1. 更新项目时遇到网络不稳定的情况, 更新失

心已赠人/ 2022年07月17日 01:24/ 0 赞/ 265 阅读

相关 angular 学习过程中遇到的坑（整理中）

最近想学习下angular，然后该文章记录了我在学习中遇到的问题 1、参照书上的例子 hello.html <!DOCTYPE html> <html ng-ap

╰+攻爆jí腚メ/ 2022年07月15日 00:12/ 0 赞/ 227 阅读

相关 angular5+webpack使用Dialog遇到的坑

趁热乎来写一下关于angular5+webpack3使用angular material组件Dialog遇到的坑 1.如果需要【弹出框】交互数据，必须在同一个typeScri

小鱼儿/ 2022年05月31日 03:45/ 0 赞/ 175 阅读

相关手机H5开发遇到的坑

手机h5与原生混合的app,出现了一些奇葩的事情，在这里与大家分享一下解决方案。问题1：手机不支持:active伪类，这个问题刚开始用的是andriod测试过没有问题，后来

旧城等待，/ 2022年04月13日 08:31/ 0 赞/ 264 阅读

相关使用mybatis-plus遇到的坑

简介如今的开发，对于数据库的curd，很多人都是使用mybatis，说到mybatis就不得不提mybatis的增强工具：mybatis-plus 。 mybatis

r囧r小猫/ 2022年01月21日 02:37/ 0 赞/ 458 阅读