angular - 如何获取 Angular ng-bootstrap 断点

Question

我在我的项目中使用 ng-bootstrap，这意味着我可以使用以下命令创建网格/断点:

<div class="row">
    <div class="col-sm-12 col-md-6 col-xl-4"></div>
</div>

无论这些有多好， Bootstrap 都不会为 typescript 添加任何功能，这意味着我无法将这些断点用于动画。

在不降低性能的情况下访问这些断点的最佳方法是什么？

Answer 1

如果这对任何人有帮助，我发现可以导入这些:

import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component} from '@angular/core';

然后在组件中执行以下操作:

mobileQuery: MediaQueryList;

private _mobileQueryListener: () => void;

constructor(private changeDetectorRef: ChangeDetectorRef, private media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
 }

ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
}

然后，您可以使用 mobileQuery.matches 等属性来检测屏幕的尺寸。

*所有这些都是从 Angular Material 的示例中复制的，发现 here