gpt4 book ai didi

Angular Material : is it possible to create modals (or dialogs) with ng-template?

转载 作者:行者123 更新时间:2023-12-03 20:16:20 24 4
gpt4 key购买 nike

在我的项目中,我使用 ngx-bootstrap's dialog需要您的 ng-template 的组件并将其显示为您的模态。

使用 ng-template有很多优势,最重要的是,如果 ng-template 没有通信障碍(在模态和原始组件之间)住在同一个组件中。这样我就可以毫无问题地调用我的组件方法。例如,在以下代码中 selectNextRow()将更改我表中的行,因此 selectedRow_Session因此下一行的数据将显示在模态上。

app.component.ts

/** display selectedRow_Session on modal */
<ng-template #sessionDetailTemplate>

<app-session-detail-model
[session]="selectedRow_Session"
[bot]="bot"
(selectNextRow)="selectNextRow()"
(closeModel$)="modalRef.hide()"
(selectPrevRow)="selectPrevRow()"
[pageNumberOfCurrentRowSelected]="pageNumberOfCurrentRowSelected"
[indexOfCurrentRowSelected]="indexOfCurrentRowSelected"
[finalDfState]="selectedRow_Session.df_state"
[sessionDataStore]="selectedRow_Session.data_store">
</app-session-detail-model>

</ng-template>

在 Angular Material Dialogs 中,我只能找到可以创建模态的 API Component而不是与 ng-template .

有没有办法做到这一点,有或没有对话框,使用 Angular Material?

最佳答案

正如评论中提到的,您可以将 TemplateRef 与 @angular/material MatDialog 一起使用。您可以在此处找到 API 引用:Angular Material MatDialog .
这是一个显示如何执行此操作的最小示例:

    import { Component, ViewChild, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material';

@Component({
selector: 'dialog-overview-example',
template: `
<div [style.margin.px]="10">
<button mat-raised-button (click)="openDialog()">Open Modal via Component Controller</button>
</div>
<div [style.margin.px]="10">
<button mat-raised-button (click)="dialog.open(myTemplate)">Open Modal directly in template</button>
</div>

<ng-template #myTemplate>
<div>
<h1>This is a template</h1>
</div>
</ng-template>
`
})
export class DialogOverviewExample {
@ViewChild('myTemplate') customTemplate: TemplateRef<any>;

constructor(public dialog: MatDialog) {}

openDialog(): void {
const dialogRef = this.dialog.open(this.customTemplate, {
width: '250px'
});

dialogRef.afterClosed().subscribe(() => {
console.log('The dialog was closed');
});
}
}
这是一个使用 Angular v6 的现场示例: Stackblitz Live Example .
希望能帮助到你!

关于 Angular Material : is it possible to create modals (or dialogs) with ng-template?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53467993/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com