Question

我正在尝试使用ObservableMedia。应用程序编译成功但在浏览器控制台中我看到此错误

错误错误：没有ObservableMedia的提供者！ at injectionError（core.es5.js：1169） at noProviderError（core.es5.js：1207）

这是我的代码

import { Component , OnInit, ViewChild} from '@angular/core';    
    import {Observable} from 'rxjs/Rx';
    import {MediaChange, ObservableMedia} from "@angular/flex-layout";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent implements OnInit {


constructor(
  public media: ObservableMedia) {

 }

  routeLinkClick() {
    if (!this.media.isActive('gt-xs')) {
      this.sidenav.toggle();
    }
  }

请帮忙。感谢

Answer 1

尝试将其添加到app.module.ts文件顶部的导入中：

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

并将其添加到app.module.ts文件的@NgModule中的导入数组中：

FlexLayoutModule

Answer 2

在Flex-layout版本7.0.0-beta.20和更高版本中，ObservableMedia被MediaObserver取代。

media-observer：现已弃用ObservableMedia，因为它预期RxJS v7。新的API称为MediaObserver，它提供与ObservableMedia完全相同的功能，只是您不能直接订阅它，

开发人员应订阅MediaObserver的media $属性；代替直接订阅ObservableMedia。 -引自https://github.com/angular/flex-layout/blob/master/CHANGELOG.md

进行了此更改后，它在今天的最新版本上没有问题：

“ @ angular / core”：“ ^ 7.1.1”，
  “ @ angular / flex-layout”：“ ^ 7.0.0-beta.23”，
  “ rxjs”：“ ^ 6.3.3”，
  “ rxjs-compat”：“ ^ 6.3.3”

Answer 3

ObservableMedia替换为MediaObserver中的@angular/flex-layout v7.0.0-beta.24 (2019-03-17)

之前：

从“ @ angular / flex-layout”导入{MediaChange，ObservableMedia}；构造函数（公共媒体：ObservableMedia）{}

之后：

import {MediaChange, MediaObserver} from "@angular/flex-layout";
constructor(public media: MediaObserver) {}

角度误差：没有ObservableMedia的提供者

3 个答案: