Переход от Angular 7 к 8 с ObservableMedia в @ angular / flex-layout - PullRequest
Новая
       20

Переход от Angular 7 к 8 с ObservableMedia в @ angular / flex-layout

0 голосов
/ 06 февраля 2020

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

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

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 устарела и теперь

MediaObserver

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

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

constructor(private media: MediaObserver)…

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

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

2-я ошибка на Lambda m c .mqAlias: свойство' mqAlias ​​'делает не существует для типа 'MediaChange []' - глядя на новый объект, я не вижу ничего похожего на это.

1 Ответ

0 голосов
/ 01 мая 2020

1-я ошибка:

Возможно, вам не хватает

lib.es2015.collection.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))
);
...