Переход с Angular 7 на 8 с помощью ObservableMedia в @angular/flex-layout

У меня есть пара вопросов, которые я не могу решить.

исходный фрагмент кода:

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)));

}

Теперь, после перехода на Angular 8, ObservableMedia устарела и теперь

Медианаблюдатель

поэтому я меняю строку импорта и тип объекта, передаваемый конструктору, на это:

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

constructor(private media: MediaObserver)…

Теперь я получаю 2 ошибки:

объявление новой карты: не удается найти «карту». Вам нужно изменить целевую библиотеку? попробуйте изменить параметр компилятора lib на es2015 или более позднюю версию. (в моем файле tsconfig для `lib' установлено значение es2017 и dom, но даже добавление es2015 не удаляет этого.

Вторая ошибка связана с Lambda mc.mqAlias: свойство «mqAlias» не существует для типа «MediaChange[]» — глядя на новый объект, я не вижу ничего похожего на это.


angular angular-flex-layout
person bilpor    schedule 06.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

1-я ошибка:

Вы можете отсутствовать

lib.es2015.коллекция.d.ts

файл в папке lib.

2-я ошибка:

в этом случае метод asObservable() передает тип MediaChange[] на mc. Чтобы получить доступ к свойству mqAlias, вам нужно убедиться, что mc имеет тип MediaChange. Вы можете сделать это, используя media$ вместо 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)));
    }

А так как media$ сопоставляется с первым элементом в массиве MediaChange[], вы также можете использовать этот код:

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