使用 CdkDialogContainer 创建自定义对话框容器答案

【问题标题】：Creating a custom dialog container using CdkDialogContainer使用 CdkDialogContainer 创建自定义对话框容器
【发布时间】：2023-02-03 18:22:30
【问题描述】：

我正在编写 Angular (14.2.0) 服务来显示 Tailwind/Flowbite dialog（Flowbite 语言模式）。看来我必须创建一个自定义 Angular CDK dialog container 来维护 Flowbite 页面上的 DOM 结构大纲并正确应用类。

我不知道如何创建和使用这样的容器，CDK 文档不是特别清楚。

我的服务代码如下所示：

import { Dialog } from '@angular/cdk/dialog';

@Injectable({
  providedIn: 'root'
})
export class FlowbiteService {

  constructor(public dialog: Dialog) {}

  openDialog<C>(component: ComponentType<C>) {
    return this.dialog.open(component, {
      backdropClass: 'dialog-backdrop',
      panelClass: 'dialog-panel',
      container: DialogContainerComponent
    });
  }

}

...而我的DialogContainerComponent 非常简单，看起来像这样（CSS 并不是很重要）：

@Component({
  selector: 'app-dialog-container',
  templateUrl: './dialog-container.component.html',
  styleUrls: ['./dialog-container.component.css']
})
export class DialogContainerComponent extends CdkDialogContainer {
}

但是，调用该服务会产生一个 app-dialog-container 元素，但在渲染时它在 DOM 中没有子元素。

我想也许内容会被投影，所以我在DialogContainerComponent的标记中添加了<ng-content></ng-content>，但这没有效果。

如何正确创建和使用我的自定义 CDK 对话框容器？该文档确实没有给出示例。

【问题讨论】：

您需要重新实现 DialogContainerComponent 类。官网是这样说的：This approach requires more code up-front, but it allows you to customize the DOM structure and behavior of the container around the dialog content.
是的，我确实读过，但是班级需要做什么？
您需要从源代码中复制和修改代码，然后将 cdkPortalOutlet 添加到您的 HTML 中。我想你已经回答了你自己的问题。

标签： angular tailwind-css angular-cdk flowbite

【解决方案1】：

好的，我决定查看源代码，发现 cdk-dialog-container 的模板包含以下内容：

<ng-template cdkPortalOutlet></ng-template>

我把这是我自己的模板，现在可以使用了。排序。

【讨论】：

你介意发布一个工作示例吗？我在派生类中调用 super() 时遇到问题，如果我删除它 - cdkPortalOutlet 中不会呈现任何内容。据我所知，这是文档之外关于该主题的唯一信息资源。
来自 CDK Dialog 的文档需要认真更新。

【解决方案2】：

好吧，在与它斗争之后，我将在这里举一个简单的例子来理解基础知识。注意导入，它们都来自@angular/cdk 依赖。

`somewhere-in-your-app.component.ts`

import { Component } from '@angular/core';
import { Dialog } from '@angular/cdk/dialog';
import { MyDialog } from './my-dialog/my-dialog';
import { MyDialogContainer } from './my-dialog/my-dialog-container';

@Component({
  selector: 'somewhere-in-your-app',
  template: '<button (click)="openDialog()">Open dialog</button>',
})
export class SomewhereInYourAppComponent {

  constructor(
    private readonly cdkDialog: Dialog,
  ) {}

  openDialog() {
    this.cdkDialog.open(MyDialog, {
      container: MyDialogContainer,
    });
  }

}

`my-dialog.module.ts`

import { NgModule } from '@angular/core';
import { DialogModule } from '@angular/cdk/dialog';
import { MyDialogContainer } from './my-dialog-container';

@NgModule({
  imports: [
    DialogModule,  // Needed for the `cdkPortalOutlet` directive
  ],

  declarations: [
    MyDialogContainer,
  ],
})
export class MyDialogModule {}

`my-dialog-container.ts`

import { Component } from '@angular/core';
import { CdkDialogContainer } from '@angular/cdk/dialog';

@Component({
  template: '<ng-template cdkPortalOutlet></ng-template>',
})
export class MyDialogContainer extends CdkDialogContainer {}

`my-dialog.ts`

import { Component } from '@angular/core';

@Component({
  template: '<p>This is my actual dialog.</p>',
})
export class MyDialog {}

【讨论】：