Angular 如何获取ng引导断点

我在我的项目中使用ng引导，这意味着我可以通过以下方式创建网格/断点：

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

不管它们有多好，bootstrap并没有为typescript添加任何功能，这意味着我不能将这些断点用于动画

---

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

如果这对任何人都有帮助，我发现可以导入这些断点：

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的一个示例中复制而来的，这里有一篇关于CDK的文章，其中引用了api：