如何获取 angular ng-bootstrap 断点

Question

我在我的项目中使用 ng-bootstrap，这意味着我可以创建一个 grid/breakpoints：

<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 的示例中复制的，发现 here

如何获取 angular ng-bootstrap 断点

How to get angular ng-bootstrap breakpoints

typescript

ng-bootstrap

angular