使侧导航内容出现在侧导航顶部

Question

我有一个角度应用程序，其中有一个材质侧导航，可以在活动时将侧导航内容推到一侧。由于此 sidenav 的结构是在 HTML 级别的角度材料本身的内容之上，所以我无法使任何内容出现在位于内容中的 sidenav“上方”。

我想要实现的是拥有一张卡片，我可以从内容和侧导航上方显示的内容进行切换，并且不关心所有内容之上的任何内容。但我似乎无法让它发挥作用。更改 z-index 并不重要，因为 HTML 中的实际元素本身位于 sidenav 下方。似乎找不到解决方案，所以询问是否有人有任何建议？

我当然可以在卡片处于活动状态时将侧导航切换为消失，但我不想这样做。

我也可以将其变成一个对话框，因为它可以位于侧导航的顶部，但如果我这样做，我就会失去与为我的视图提供数据的服务的联系，因为该对话框不位于结构的内容部分。所以我想听听其他建议。

Answer 1

下面是一个对话框服务的示例，它提供了一个通用信息对话框，可以通过注入令牌在打开时传递数据：

// dialog.service.ts

  export class DialogService {
    public dialog = inject(MatDialog);

    openInfoDialog(config: IDialogData): Promise<boolean> {
        const dialogRef = this.dialog.open(InfoDialogComponent, {
            data: config,
        });

        return lastValueFrom(dialogRef.afterClosed());
    }
  }

// info-dialog.component.ts

  export class InfoDialogComponent {
    constructor(
        public dialogRef: MatDialogRef<InfoDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public dialogData: IDialogData
    ) {}
 }

// any.component.ts

    openInfoDialog(): void {
        this.dialogService
            .openInfoDialog({
                title: 'Dialog',
                message: 'Hello from info dialog',
                confirmKey: 'Yep',
            })
            .then((result) => {
                console.log('dialog closed with: ', result);
                this.infoDialogDismissed = result.toString();
            });
    }

您可以从这个示例中看到，通过定义 IDialogData，我能够传入一个类型安全对象，该对象为对话框组件提供我需要的任何详细信息。

在更复杂的不同场景中，我可以通过注入令牌传入 ID，并且

info-dialog

组件可以使用传递的 ID 调用 API onInit 来获取动态网络数据。

请注意，上面的代码是为 Angular 和 Angular Material 17 编写的。代码可能会随早期版本而变化，但概念保持不变。希望这可以帮助？有任何问题请告诉我:)