角度错误：没有 ObservableMedia 的提供者答案

【问题标题】：Angular Error: No provider for ObservableMedia角度错误：没有 ObservableMedia 的提供者
【发布时间】：2018-03-04 15:27:30
【问题描述】：

我正在尝试使用 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();
    }
  }

请帮忙。谢谢

【问题讨论】：

你是否将 FlexLayoutModule 导入到你的 NgModule 中？
谢谢它解决了这个问题。

标签： angular angular-flex-layout

【解决方案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) {}

【讨论】：

【解决方案2】：

在 flex-layout 版本 7.0.0-beta.20 及更高版本中，ObservableMedia 被替换为 MediaObserver。

media-observer：由于预期 RxJS v7，现在不推荐使用 ObservableMedia。新的 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"

【讨论】：

从 flex-layout 版本 7.0.0-beta.24 及更高版本开始 The stream data type for asObservable is now MediaChange[] instead of MediaChange and media$ is deprecated in favor of asObservable(). github.com/angular/flex-layout/blob/master/CHANGELOG.md

【解决方案3】：

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

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

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

FlexLayoutModule

【讨论】：