javascript - 角度材质对话框未打开
问题描述
我有来自角度材料的对话框的问题,当我按下按钮打开它时,它确实如此,但不是 rly。对话框不显示,但控制台打印“打开”和“关闭”,没有错误
对话框组件
import {Component, Inject} from '@angular/core';
import {RssFeed} from "../model/rssFeed";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {AppService} from "../service/app.service";
@Component({
selector: 'app-new-feed-dialog',
templateUrl: './new-feed-dialog.component.html',
styleUrls: ['./new-feed-dialog.component.css']
})
export class NewFeedDialogComponent {
rssFeed: RssFeed = new RssFeed();
constructor(private service: AppService,
public dialogRef: MatDialogRef<NewFeedDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
}
onSaveClick(): void {
this.service.saveRssFeed(this.rssFeed)
this.dialogRef.close(this.rssFeed);
}
onCancelClick(): void {
this.dialogRef.close();
}
}
html
<h2 mat-dialog-title>
<mat-icon>library_add</mat-icon>
New Feed
</h2>
<mat-dialog-content>
<form>
<mat-form-field class="full-width">
<input matInput placeholder="Feed Name" name="name" [(ngModel)]="rssFeed.name">
</mat-form-field>
<mat-form-field class="full-width">
<input matInput placeholder="Feed Url" name="url" [(ngModel)]="rssFeed.url">
</mat-form-field>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onCancelClick()">Cancel</button>
<button mat-button (click)="onSaveClick()">Save</button>
</mat-dialog-actions>
我从另一个组件打开它
onAddRssFeedClick(): void{
let dialogRef = this.dialog.open(NewFeedDialogComponent)
dialogRef.afterOpen().subscribe( ()=> {
console.log('open')
})
dialogRef.afterClosed().subscribe(() => {
console.log('close')
});
}
解决方案
在您的app.component.html
中,有一个触发您的模式的按钮<a class="nav-link" (click)="onAddRssFeedClick()" href="#">Add Feed</a>
删除href="#"
,你很好!
推荐阅读
- javascript - 谁能帮我找出我的表单验证代码有什么问题?
- java - 无法从静态上下文引用 Java 非静态方法“getNumberOfOccupants()”
- database - 为什么TDengine消耗的存储空间比TimescaleDB少那么多?
- python - 如何在同一范围内运行多个 for 循环
- c# - 将枚举作为参数传递给 C# 中的方法
- php - 填充数据库laravel php
- r - R 中的跟踪金额
- java - 如何远程调试在 Azure 应用服务上运行的 Java 应用程序
- vuepress - vuepress 本地搜索未显示 [版本 2.0.0-beta.22]
- c# - 如何让大型阴影投射表现出色?(400x400 平铺地图)