8

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

ERROR 错误：没有 ObservableMedia 的提供者！在 injectionError (core.es5.js:1169) 在 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();
    }
  }

请帮忙。谢谢

4

3 回答 3

7

在 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"

于 2019-01-19T19:15:32.833 回答
4

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

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

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

FlexLayoutModule
于 2018-07-02T23:10:47.903 回答
1

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) {}
于 2020-02-20T11:47:35.837 回答