角度错误：没有ObservableMedia的提供程序

Question

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

错误错误：没有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();
    }
  }

请帮忙。谢谢

Answer 1

在 7.0.0-beta.20 及更高版本的 flex-layout 版本中，ObservableMedia 被 MediaObserver 取代。

媒体观察者：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 2

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

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

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

FlexLayoutModule