Question

我正在尝试在我的angular6应用程序中进行通用渲染。为此我尝试使用命令'npm run build：ssr'创建我的应用程序的构建，但它显示以下错误。

ERROR in src\app\app.component.html(7,5): : Property 'isHandset$' does not exist on type 'AppComponent'.
src\app\app.component.html(8,5): : Property 'isHandset$' does not exist on type 'AppComponent'.
src\app\app.component.html(6,5): : Property 'isHandset$' does not exist on type 'AppComponent'.
src\app\app.component.html(23,9): : Property 'isHandset$' does not exist on type 'AppComponent'.

app.component.html

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/home']">Home</a>
      <a mat-list-item [routerLink]="['/about',{outlets:{fchild:['firstChild'],schild:['']}}]">ABOUT</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>

<router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

app.component.ts

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

  }

在上面的代码中，我在我的角度应用中使用了材料设计，'isHandset $'属性是材料设计的一部分。任何人都可以帮我解决这个问题。

Answer 1

您是否已将MatSidenavModule导入app.module.ts？

angular6：material-nav组件创建构建错误“属性'isHandset $'在'AppComponent'类型上不存在。”

1 个答案: