使用@ ObservableMedia /flex布局从角度7移动到8

Question

我有几个问题我无法解决。

原始代码片段：

import { map } from 'rxjs/operators';
import { ObservableMedia } from '@angular/flex-layout';

…..export class MyClass {

readonly breakpointsToColumnsNumber = new Map([
    ['xs', 1],
    ['sm', 2],
    ['md', 3],
    ['lg', 4],
    ['xl', 5],
  ]);

constructor(private media: ObservableMedia ) {
  this.columns$ = this.media.asObservable().pipe(map(mc => <number>this.breakpointsToColumnsNumber.get(mc.mqAlias)));

}

现在，在移动到角8之后，ObservableMedia已经被废弃了，现在

MediaObserver

因此，我将导入行和传递给构造函数的对象类型更改为：

import { MediaObserver } from '@angular/flex-layout';

constructor(private media: MediaObserver)…

现在我得到了两个错误：

声明新地图:找不到“地图”。您需要更改目标库吗？尝试将lib编译器选项更改为es2015或更高版本。(在我的tsconfig文件中，我将“`lib”设置为es2017和dom，但即使添加es2015也不会删除它。

第二个错误发生在Lambda mc.mqAlias上:属性'mqAlias‘在'MediaChange[]’类型上不存在--在新对象上，我看不到任何类似于此的东西。

Answer 1

第一个错误：

你可能失踪了

lib.es2015.collection.d.ts

在您的lib文件夹中。

第二个错误：

在本例中，asObservable()方法将MediaChange[]类型传递给mc。为了访问mqAlias属性，您需要确保mc是MediaChange类型的。您可以通过使用媒体$而不是asObservable()来做到这一点。您的代码最终可能看起来如下所示：

import { MediaObserver } from '@angular/flex-layout';

    ...

constructor(private media: MediaObserver) {
    this.columns$ = this.media.media$.pipe(map(mc => <number>this.breakpointsToColumnsNumber.get(mc.mqAlias)));
    }

由于媒体$映射到MediaChange[]数组中的第一项，所以您还可以使用以下代码：

this.columns$ = this.media.asObservable()
    .pipe(
        map(mc => <number>this.breakpointsToColumnsNumber.get(mc[0].mqAlias))
);