Question

我正在尝试在Angular 6应用中安装Material Design。我使用命令ng generate @ angular / material：nav myNav添加了导航示意图。

我正在使用http://plugins.codershood.info/#/plugins/ngmm-plugin中的多层嵌套菜单。

当我编译并提供该应用程序时，菜单显示成功，但是当我单击任何菜单项以重定向到另一个组件时，出现错误信息

Cannot read property 'navigateByUrl' of undefined

我对app.modules.ts的代码如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
import { MyNavComponent } from './my-nav/my-nav.component';
import { NgMaterialMultilevelMenuModule } from 'ng-material-multilevel-menu';


@NgModule({
  declarations: [
    AppComponent,
    MyNavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    NgMaterialMultilevelMenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的my-nav.component.ts代码如下：

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

@Component({
  selector: 'app-my-nav',
  templateUrl: './my-nav.component.html',
  styleUrls: ['./my-nav.component.css'],
})
export class MyNavComponent {
    config = {
        paddingAtStart: true,
        classname: 'my-custom-class',
        listBackgroundColor: '#EEE',
        fontColor: 'rgb(8, 54, 71)',
        backgroundColor: 'FFF',
        selectedListFontColor: '#673AB7',
      };
    appitems = [
        {
           label: 'Dashboard',
           link: '/item-1-1',
           icon: 'dashboard'
        },
      {
        label: 'Dashboard',
        icon: 'dashboard',
        items: [
          {
            label: 'Item 1.1',
            link: '/item-1-1',
            faIcon: 'fab fa-accusoft'
          },
          {
            label: 'Item 1.2',
            faIcon: 'fab fa-accessible-icon',
            items: [
              {
                label: 'Item 1.2.1',
                link: '/item-1-2-1',
                faIcon: 'fas fa-allergies'
              },
              {
                label: 'Item 1.2.2',
                faIcon: 'fas fa-ambulance',
                items: [
                  {
                    label: 'Item 1.2.2.1',
                    link: 'item-1-2-2-1',
                    faIcon: 'fas fa-anchor'
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        label: 'Item 2',
        icon: 'alarm',
        items: [
          {
            label: 'Item 2.1',
            link: '/item-2-1',
            icon: 'favorite'
          },
          {
            label: 'Item 2.2',
            link: '/item-2-2',
            icon: 'favorite_border'
          }
        ]
      },
      {
        label: 'Item 3',
        link: '/item-3',
        icon: 'offline_pin'
      },
      {
        label: 'Item 4',
        link: '/item-4',
        icon: 'star_rate',
        hidden: true
      }
    ];

    navTo($event) {
        let url = $event.link;
        this.router.navigateByUrl(url);
    }

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

  constructor(private breakpointObserver: BreakpointObserver) {}

}

Answer 1

您需要按如下所示将路由器插入构造函数中，

  constructor(private breakpointObserver: BreakpointObserver, private router : Router) {}

Angular 6材质-无法读取未定义的属性'navigateByUrl'

1 个答案: