Материал Angular 6 - Не удается прочитать свойство 'navigateByUrl' из неопределенного

Question

Я пытаюсь установить Material Design в своем приложении Angular 6.Я добавил навигационную схему с помощью команды 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) {}