将字符串或对象传递给angular2材质对话框组件
Angular Material 是一个 UI 组件库，提供了一套现代化的 UI 组件，用于构建 Web 应用程序。Angular Material 中的对话框组件（Dialog Component）可以用于显示模态对话框，以便与用户进行交互。
在 Angular 中，可以通过将字符串或对象传递给 Angular Material 的对话框组件来显示对话框。具体步骤如下：
- 首先，确保已经安装了 Angular Material。可以通过在终端中运行以下命令来安装 Angular Material：
- 首先，确保已经安装了 Angular Material。可以通过在终端中运行以下命令来安装 Angular Material：
- 在需要使用对话框的组件中，导入
MatDialog和对话框组件所需的其他依赖项： - 在需要使用对话框的组件中，导入
MatDialog和对话框组件所需的其他依赖项： - 在组件的构造函数中注入
MatDialog： - 在组件的构造函数中注入
MatDialog： - 创建一个方法来打开对话框，并将字符串或对象作为参数传递给对话框组件：
- 创建一个方法来打开对话框，并将字符串或对象作为参数传递给对话框组件：
- 在上述代码中，
DialogComponent是你自己创建的对话框组件，data是传递给对话框的字符串或对象。 - 在对话框组件中，可以通过注入
MAT_DIALOG_DATA来获取传递给对话框的数据： - 在对话框组件中，可以通过注入
MAT_DIALOG_DATA来获取传递给对话框的数据： - 在上述代码中，
data变量将包含传递给对话框的字符串或对象。
这样，你就可以通过调用 openDialog 方法，并传递字符串或对象来显示 Angular Material 的对话框组件，并在对话框组件中获取传递的数据。
关于 Angular Material 对话框组件的更多信息，以及其他可用的组件和功能，请参考腾讯云的 Angular Material 文档：
相关·内容
3回答
打开对话框不工作，材料角度6
angular、dialog、angular-material
我的.open()在我的材料对话框中不工作在角度6。我收到的错误是：
错误TypeError:无法读取未定义的属性“打开”
可能出什么问题了？似乎MatDialog的导入没有被识别。
父组件：
import { Component, OnInit, Input, Inject } from '@angular/core';
import { AuthService } from "../../services/auth.service";
import { SiteService } from "../../services/site.servi
浏览 0提问于2019-03-11得票数 1
1回答
角材质对话框弹出显示在页面底部而不是弹出式。
angular、angular-material
我正在创建棱角材质对话框弹出，但不是弹出组件显示在底部。
Component.ts
constructor(public dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '250px'
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed')
浏览 5提问于2022-04-29得票数 0
回答已采纳
4回答
MatDialog未正确显示
angular
我正在尝试使用MatDialog，并基于实现了该对话框，如下所示：
import {Component, Inject, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {AuthenticationService} from '../../../service/authentication.service';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angul
浏览 0提问于2017-11-12得票数 22
回答已采纳
1回答
由于某种原因没有出现角对话框窗口
angular、typescript
我需要为我的项目实现一个对话框窗口，但由于某种原因我无法让它工作。对话框窗口没有打开，但是对话框组件的内容像HTML元素一样添加到页面的末尾，而不会使页面的其余部分变暗。我又不是在做什么复杂的事。我现在只想打开一个简单的对话框窗口。我并没有写任何与Youtube上的人或官方文件不同的东西。我多次检查了代码，但找不到错误。我是不是遗漏了什么？
对话框组件：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dialog',
templa
浏览 0提问于2019-04-14得票数 3
回答已采纳
5回答
没有MatDialogRef的提供程序
angular、angular-material、angular-material2
我使用的是material 2版本2.0.0-beta.12。我需要调整材料模型的位置。我遵循这个答案来做这件事。由于MdDialog现在不可用，所以我使用了{MatDialog，MatDialogRef，MAT_DIALOG_DATA}。
constructor(public dialog: MatDialog,public dialModRef:MatDialogRef<any>) {}
当我将MatDialogRef添加到我的构造函数时，它给出了“No provider for MatDialogRef”错误。你能帮我解决这个问题吗？
dialog-overview-exam
浏览 4提问于2017-10-11得票数 29
1回答
我无法打开对话框是在角项目中
angular、dialog、popup
Hi当单击open对话框()按钮时，它不会打开新对话框，没有响应，现在控制台角7项目中显示了错误，我正在使用material
Ts file
@Component({
selector: "passport",
templateUrl: "passport.html",
})
export class passportDialog {
dialog: any;
constructor(
public dialogRef: MatDialogRef<passportDialog>,
public matdialog:
浏览 3提问于2022-10-26得票数 0
1回答
Angular Material对话框错误‘无法绑定到'formGroup’，因为它不是‘mat- Dialog -content’的已知属性。
angular、angular-material
尝试按照angular material网站上的示例添加对话框功能。出现错误“无法绑定到'formGroup‘，因为它不是’mat-dialog-content‘的已知属性。Angular Material文档缺少有关NgModule文件的信息。
我遗漏了什么？
模块：
import { MatExpansionModule, MatDialog, MatDialogRef, MAT_DIALOG_DATA,
MatDialogModule } from 'node_modules/@angular/material';
import { PopupC
浏览 1提问于2018-08-14得票数 0
10回答
角材料对话框组件隐藏了我的网站的所有组件
angular、material-design、angular-material
我使用角5和角材料(最新版本)，我试图打开一个对话框从一个网页。当我单击触发打开的按钮时，整个网站都处于空白的背景中，就像对话框正在叠加内容并将其全部隐藏起来一样。
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
moduleId: module.id,
selector: 'app-dialog',
浏览 7提问于2017-12-12得票数 19
1回答
带有DialogBox的角6加载杆
html、angular、typescript、angular-material
我一直使用的角度与材料，我想有‘垫-进度-栏’显示时，我按‘添加’在我的对话框，我已经做了一个小应用程序在StackBlitz上，这可能使它更容易理解。
dialog-overview-example.html
<div *ngIf="LoadingCondition; then LoadingBlock"></div>
<ng-template #LoadingBlock><mat-progress-bar mode="indeterminate"></mat-progress-bar><
浏览 0提问于2018-10-03得票数 0
回答已采纳
2回答
如何在按钮单击或悬停时将角度材质(2.x +)对话框定位到屏幕右侧
angular、angular5、angular-material2
我已经开始学习Angular 5的材料设计，我的要求是我必须显示角度材料对话框固定在屏幕的右侧。默认情况下，它总是出现在屏幕的中心。如何导入屏幕右侧的显示对话框？请帮帮忙。
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig }
from '@angular/material';
我的HTML：
<div class="add-contact-btn" fxFlex="10">
<button mat-raised-button (cli
浏览 1提问于2018-03-05得票数 9
2回答
是否在主应用程序组件中显示来自对象的材质对话框中的数据？
angular、angular-material
尝试将数据从对象推送到Angular材质应用程序中的对话框窗口。相当确定这是可能的--但可能缺少正确传递它的方法。代码如下：
app.component.ts
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DialogWindowComponent } from './dialog-window/dialog-window.component';
@Component({
selector:
浏览 0提问于2018-09-22得票数 2
2回答
MatDialog空显示
html、angular、typescript、angular-material、dialog
我正在使用this教程来显示简单的对话框。 问题是对话框显示为空，而控制台没有显示任何错误。 即使我尝试更改dialog.component.html或dress-form.ts中的部件，也没有任何变化。 这是我打开对话框的组件(dress-form.ts)： import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from 'src/app/dialog/dialog.component';
@Component({
selector: '
浏览 19提问于2020-07-19得票数 0
2回答
在完整日历中使用的mat对话框打开两次
angular、dialog、fullcalendar、angular-material、angular6
我使用的是mat对话框，它是在ap-fullcalendar上单击一个事件时执行的。我正在使用Angular6。
当我单击一个事件时，出现以下对话框，没有任何信息。
一旦我按下“购买”按钮，它就会把我带到实际的对话框。
注意:按钮似乎没有像预期的那样工作，然而，我认为这是由于我最初的问题。此外，当我双击我的事件时，我得到了不同的行为，其中对话框打开，如第一个屏幕截图所示。当我按或取消时，它可以正常关闭。
如有任何帮助，我们不胜感激！
我的主要组件TS：
import { Component, OnInit, ViewChild, Inject } from '@an
浏览 1提问于2018-08-12得票数 4
1回答
角材料对话模态误差
angular、angular-material、angular-material2
这是第一次使用角4和材料设计，我试图创建一个带有角度材料设计的模态窗口，并拥有以下两个文件：
roomlist.component
import { Component, OnInit, Inject } from '@angular/core';
import { RoomService } from '../../services/room.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { RoomD
浏览 1提问于2017-10-26得票数 1
回答已采纳
1回答
Angular 5.0 StaticInjectorError
javascript、angular、angular-material-5
我正在尝试打开对话框。当我按下一个按钮，但出现以下错误时：
ERROR Error: StaticInjectorError(AppModule)[UsertableComponent -> MatDialog]:
StaticInjectorError(Platform: core)[UsertableComponent -> MatDialog]:
NullInjectorError: No provider for MatDialog!
at _NullInjector.get (core.js:994)
at
浏览 0提问于2018-02-06得票数 2
3回答
材料对话框afterOpened与AfterViewInit。在AfterViewInit中访问对话框数据安全吗？
angular、angular-material
我以标准的方式打开对话框：
this.dialogRef = this.dialog.open(DialogComponent, {
width: '90vw',
height: '85vh',
....
在DialogComponent中，我访问ngAfterViewInit中的对话框数据：
constructor(
public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: Di
浏览 6提问于2019-09-18得票数 0
回答已采纳
6回答
无法将模态窗口从角度材料中居中
angular、angular-material2
这是疯狂的，但以下代码：
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'decline',
templateUrl: './decline.component.html',
styleUrls: ['../.
浏览 3提问于2017-11-23得票数 11
2回答
应用程序不显示对话框相反，我的应用程序将对话框显示为页面上的一个组件
angular、dialog、angular-material
我正在制作一个测试应用程序，因为当我点击一个按钮时，我会使用一个对话框。我做了这里建议的所有事情()，但我不明白为什么它不工作
它不是将我的组件显示为对话框，而是在我的页面上显示我的对话框(而不是对话框)，请参见我的屏幕截图。红色框中的内容应作为对话框打开
我已经尝试了一些不同的东西，也在互联网上搜索了一些解决方案，甚至在StackOverflow上也是如此。但目前似乎什么都不起作用。
主元件：
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular
浏览 21提问于2019-08-14得票数 0
回答已采纳
2回答
角质弹出弹出不起作用吗？
angular、angular-material2、angular5
login.component.ts
import { Component, OnInit,ViewChild , Inject} from '@angular/core';
import { Login } from './login';
import {MatPaginator, MatSort, MatTableDataSource, MatDialog,MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-
浏览 0提问于2018-01-03得票数 1
回答已采纳
3回答
如何从mat对话框组件到实现mat对话框的组件之间进行通信？
angular、angular-material、angular-cli、mat-dialog
我有一个对话框组件和应用程序组件，其中的材料对话是实现的。这里是app组件的代码
import { Component } from '@angular/core';
import {VERSION, MatDialog, MatDialogRef} from '@angular/material';
import { DialogComponent } from '../dialog.component';
@Component({
selector: 'my-app',
templateUrl: './app
浏览 9提问于2017-12-23得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
