如何获取角度 ng-bootstrap 断点

Question

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

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

无论这些多么好，bootstrap 都没有为打字稿添加任何功能，这意味着我不能将这些断点用于动画。

以不降低性能的方式访问这些断点的最佳方式是什么？

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 的示例复制而来的，可在此处找到