无法读取mediaObserver Flex Layout的undefined属性'isActive'

Question

我正在使用这个document来创建一个响应式网页。当我在html文件中放入“* ngIf =”mediaObserver.isActive（'lg'）“时出现错误。这是html文件。

<mat-grid-list cols="7" rowHeight="15vh" [gutterSize]="'0px'" *ngIf="mediaObserver.isActive('lg')">
    <mat-grid-tile
        *ngFor="let tile of tiles; let i = index"
        [colspan]="tile.cols"
        [rowspan]="tile.rows"
        [style.background-image]="tile.color"

        [ngClass]="'tile' + i"
        [ngStyle]="{'font-size': 'calc(' + tile.fontSize + 'rem + 0.5vw)', 'font-family': tile.fontFamily +', sans-serif;',
        'padding-top':tile.paddingTop, 'margin-left':tile.marginLeft, 'margin-right':tile.marginRight, 'line-height': 1.2}"
     >

       <ng-container *ngIf="tile.hasImage; else second" >
         <img [src]="tile.imageUrl"/>
       </ng-container>

       <ng-template #second>
          <ng-container *ngIf="tile.hasButton ; else textContainer">
             <a mat-button  routerLink="/auth">Try BuySell For Free</a>
          </ng-container>
       </ng-template>
       <ng-template #textContainer>
          {{tile.text}}
       </ng-template>
     </mat-grid-tile>
</mat-grid-list>

我也试过media.isActive没有成功。

这是component.ts代码：

import { Component, OnDestroy } from '@angular/core'
import {MediaChange, MediaObserver} from '@angular/flex-layout';
import {Subscription} from 'rxjs';

export interface Tile {
 color: string;
  cols: number;
}
@Component({
  selector: 'app-home',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css']
})
export class HomeComponent implements OnDestroy{
  tiles: Tile[] ;

  watcher: Subscription;
  activeMediaQuery = '';

  constructor(mediaObserver: MediaObserver){
  this.watcher = mediaObserver.media$.subscribe((change: MediaChange) => {
    this.activeMediaQuery = change ? `'${change.mqAlias}' = 
       (${change.mediaQuery})` : '';
    if ( change.mqAlias == 'xs') {
       this.loadMobileContent();
    }
    switch(change.mqAlias) { 
      case 'xs': { 
         //statements; 

         break; 

Answer 1

我将constructor(mediaObserver: MediaObserver)更改为constructor(public mediaObserver: MediaObserver)，代码运行正常。