angular - 是否可以在特定 DOM 元素上打开 Angular/Material Snackbar？-6ren

angular - 是否可以在特定 DOM 元素上打开 Angular/Material Snackbar？

转载作者：行者123 更新时间：2023-12-04 02:58:29

26

4

组件:https://material.angular.io/components/snack-bar/examples

我有一个页面是父部分('#wrapper_container')。我想在“#wrapper_element”的子元素的中心弹出 snackbar 。

谢谢

最佳答案

我们不能使用 viewContainerRef选项，以便将 snackbar 附加到自定义容器。来自 Angular Material docs ，这个选项是:

The view container that serves as the parent for the snackbar for the purposes of dependency injection.###Note: this does not affect where the snackbar is inserted in the DOM.###

来自 ComponentPortal documentation ，我们可以找到更详细的描述 viewContainerRef :

Where the attached component should live in Angular's logical component tree. This is different from where the component renders, which is determined by the PortalOutlet. The origin is necessary when the host is outside of the Angular application context.

当快餐店打开时检查 DOM 时，我们会发现以下组件层次结构:

Body - <body>

OverlayContainer - <div class="cdk-overlay-container"></div>

Overlay - <div id="cdk-overlay-{id}" class="cdk-overlay-pane">

ComponentPortal - <snack-bar-container></snack-bar-container>

Component - 我们的Snackbar ，打开方式如下:this.snackbar.open(message, action) .

现在，我们真正需要改变的是 OverlayContainer 在 DOM 中的位置。，其中，根据 docs ，是:

the container element in which all individual overlay elements arerendered.

By default, the overlay container is appended directly to the document body.

从技术上讲，可以提供定制覆盖容器，如 documentation 中所述，通过使用自定义提供程序:

@NgModule({
  providers: [{provide: OverlayContainer, useClass: AppOverlayContainer}],
 // ...
})
export class MyModule { }

一个简单的实现是发布的 here .

但是，不幸的是，它是单例并产生一个潜在的问题:
MatDialog , MatSnackbar , MatTooltip , MatBottomSheet以及所有使用 OverlayContainer 的组件将在此 AppOverlayContainer 内打开:
由于这种情况远非理想，我编写的自定义提供程序 ( AppOverlayContainer) 需要更改 overlaycontainer 的位置。仅按需提供。如果不调用，它将让 overlaycontainer附加到 body .
代码是:

import { Injectable } from '@angular/core';
import { OverlayContainer } from '@angular/cdk/overlay';

@Injectable({
 providedIn: 'root'
})
export class AppOverlayContainer extends OverlayContainer {
  appOverlayContainerClass = 'app-cdk-overlay-container';

  /**
   * Append the OverlayContainer to the custom wrapper element
   */
  public appendToCustomWrapper(wrapperElement: HTMLElement): void {
    if (wrapperElement === null) {
      return;
    }
    
    // this._containerElement is 'cdk-overlay-container'
    if (!this._containerElement) {
      super._createContainer();
    }

    // add a custom css class to the 'cdk-overlay-container' for styling purposes
  this._containerElement.classList.add(this.appOverlayContainerClass);
   
    // attach the 'cdk-overlay-container' to our custom wrapper
    wrapperElement.appendChild(this._containerElement);
  }

  /**
   * Remove the OverlayContainer from the custom element and append it to body
   */
  public appendToBody(): void {
    if (!this._containerElement) {
     return;
    }

    // remove the custom css class from the 'cdk-overlay-container'
    this._containerElement.classList.remove(this.appOverlayContainerClass);

    // re-attach the 'cdk-overlay-container' to body
    this._document.body.appendChild(this._containerElement);
  }

}

因此，在打开 snackbar 之前，我们必须调用:

AppOverlayContainer.appendToCustomWrapper(HTMLElement).

方法，它附加 overlaycontainer到我们的自定义包装元素。
当 snackbar 关门时，最好调用以下电话:

AppOverlayContainer.appendToBody();

方法，删除 overlaycontainer来自我们的自定义包装元素并将其重新附加到 body .
此外，由于 AppOverlayContainer将被注入(inject)到我们的组件中并且需要保持为单例，我们将使用 useExisting 来提供它句法:

providers: [
   {provide: OverlayContainer, useExisting: AppOverlayContainer}
]

示例:
如果我们想在自定义容器中显示小吃吧， #appOverlayWrapperContainer1 :

<button mat-raised-button 
  (click)="openSnackBar(appOverlayWrapperContainer1, 'Snackbar 1 msg', 'Action 1')">
  Open Snackbar 1
</button>
<div class="app-overlay-wrapper-container" #appOverlayWrapperContainer1>
  Snackbar 1 overlay attached to this div
</div>

在我们的组件中 .ts我们有:

import { AppOverlayContainer } from './app-overlay-container';

export class SnackBarOverviewExample {

  constructor(
    private _snackBar: MatSnackBar,
    private _appOverlayContainer: AppOverlayContainer
  ) { }

  openSnackBar(
    overlayContainerWrapper: HTMLElement, 
    message: string, 
    action: string
  ) {

    if (overlayContainerWrapper === null) {
      return;
    }
  
  this.appOverlayContainer.appendToCustomWrapper(overlayContainerWrapper);

    this.snackbarRef = this._snackBar.open(message, action, {
      duration: 2000
    });
  }
}

此外，我们需要一些必须插入到应用通用样式表中的 css:

.app-cdk-overlay-container {
  position: absolute;
}

完整的代码和演示在 Stackblitz 上，我是否已经实现了多个 snackbar 容器:
https://stackblitz.com/edit/angular-ivy-wxthzy

关于angular - 是否可以在特定 DOM 元素上打开 Angular/Material Snackbar？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51506486/

26

4

0

文章推荐： arrays - 更新深度嵌套数组 mongodb

文章推荐： java - pkcs11异常解析配置: Unexpected value Token ['(' ]

文章推荐： amazon-web-services - Terraform 从 S3 获取 json 数据

文章推荐： angular - 如何在 ngif 中使用本地存储值

Python 是否
我有一个 if 语句，如下所示 if (not(fullpath.lower().endswith(".pdf")) or not (fullpath.lower().endswith(tup
php - 是否/是否有任何浏览器允许控制流构造在脚本标签中存活？
然而，在 PHP 中，可以: only appears if $foo is true. only appears if $foo is false. 在 Javascript 中，能否在一个脚
binary - 是否(曾经有过)为任意二进制格式创建模式语言的努力？
XML有很多好处。它既是机器可读的，也是人类可读的，它具有标准化的格式，并且用途广泛。它也有一些缺点。它是冗长的，不是传输大量数据的非常有效的方法。 XML最有用的方面之一是模式语言。使用模式，您可
sql-server - 是否 CTE
由于长期使用 SQL2000，我并没有真正深入了解公用表表达式。我给出的答案here (#4025380)和 here (#4018793)违背了潮流，因为他们没有使用 CTE。我很欣赏它们对于递
java - 是否 hibernate 分离对象的默认乐观锁定？
我有一个应用程序: void deleteObj(id){ MyObj obj = getObjById(id); if (obj == null) { throw n
mysql - 是否 hibernate 关闭连接？
我的代码如下。可能我以类似的方式多次使用它，即简单地说，我正在以这种方式管理 session 和事务: List users= null; try{ sess
android - 是否/是否有适用于Android的标准程序包结构/层次结构做法？
在开发J2EE Web应用程序时，我通常会按以下方式组织我的包结构 com.jameselsey.. 控制器-控制器/操作转到此处服务-事务服务类，由控制器调用域-应用程序使用的我的域类/对象 D
c++ -/是否/memmove 使用中间缓冲区？
这更多是出于好奇而不是任何重要问题，但我只是想知道 memmove 中的以下片段文档: Copying takes place as if an intermediate buffer were us
algorithm - 在联合查找算法中，是否/如何调整节点在路径压缩中的等级
路径压缩涉及将根指定为路径上每个节点的新父节点——这可能会降低根的等级，并可能降低路径上所有节点的等级。有办法解决这个问题吗？有必要处理这个吗？或者，也许可以将等级视为树高的上限而不是确切的高度？谢
C++ 是否 reinterpret_cast 总是返回结果？
我有两个类，A 和 B。A 是 B 的父类，我有一个函数接收指向 A 类型类的指针，检查它是否也是 B 类型，如果是将调用另一个函数，该函数接受一个指向类型 B 的类的指针。当函数调用另一个函数时，我
c++ - Valgrind 是否/可以使用多个处理器？
有没有办法让 valgrind 使用多个处理器？我正在使用 valgrind 的 callgrind 进行一些瓶颈分析，并注意到我的应用程序中的资源使用行为与在 valgrind/callgrind
haskell - 是否/应该将函数包装到 monad 转换器中被视为不好的做法？
假设我们要使用 ReaderT [(a,b)]超过 Maybe monad，然后我们想在列表中进行查找。现在，一个简单且不常见的方法是: 第一种可能性 find a = ReaderT (looku
jQuery 检查 attr 是否=值
我的代码似乎有问题。我需要说的是: if ( $('html').attr('lang').val() == 'fr-FR' ) { // do this } else { // do
azure - AKS 是否/是否支持跨更新域传播 Pod？
根据this文章(2018 年 4 月)AKS 在可用性集中运行时能够跨故障域智能放置 Pod，但尚不考虑更新域。很快就会使用更新域将 Pod 放入 AKS 中吗？最佳答案当您设置集群时，它已经自
php - 查询以检查同一表中的 row1 = row2 是否
course | section | type comart2 : bsit201 : lec comart2 :
android - AAR 依赖项 - 是否 bundle ？
我正在开发自己的 SDK，而这又依赖于某些第 3 方 SDK。例如 - OkHttp。我应该将 OkHttp 添加到我的 build.gradle 中，还是让我的 SDK 用户包含它？在这种情况下，
functional-programming - Rust 是否/将支持函数式编程习惯用法？
随着 Rust 越来越充实，我对它的兴趣开始激起。我喜欢它支持代数数据类型，尤其是那些匹配的事实，但是对其他功能习语有什么想法吗？例如标准库中是否有标准过滤器/映射/归约函数的集合，更重要的是，您能
html - h1 :before{ } work for seo? 是否
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 9 年前。 Improve
php - 是否/为什么 php 强制您使用对象构造函数
我一直在研究 PHP 中的对象。我见过的所有示例甚至在它们自己的对象上都使用了对象构造函数。 PHP 会强制您这样做吗？如果是，为什么？例如: firstname = $firstname;
php - PHP 是否(在内部)以不同方式处理数字索引数组？
...比关联数组？关联数组会占用更多内存吗？ $arr = array(1, 1, 1); $arr[10] = 1; $arr[] = 1; // <- index is 11; does the

首页

博学

6Ren·AI

商城

angular - 是否可以在特定 DOM 元素上打开 Angular/Material Snackbar？

By default, the overlay container is appended directly to the document body.