Angular6 - куда импортировать RouterModule для предотвращения "Не удается связать с" routerLink ", так как это не известное свойство" a"

У меня возникли трудности с размещением RouterModule, чтобы предотвратить ошибку html-ссылки роутера.

Компонент категории

  • Отображает список категорий
  • Отображение списка альбомов в этих категориях путем добавления элемента album в категории html: <app-albums></app-albums>
  • Нажатие на категорию покажет связанный контент в <app-albums>

Компоненты альбомов

  • Нажатие на альбом изменит маршрут и отобразит другой компонент

  • Теперь слева будет список альбомов

  • Справа будет отображаться информация об альбоме при нажатии на альбом, имея <app-album-detail></app-album-detail> Добавлен HTML-элемент для "импорта" компонента детализации альбома

вопрос

Я добавил RouterModule в модуль категорий, который позволяет мне использовать [RouterLink] в моем HTML. Тем не менее, когда я пытаюсь использовать [RouterLink] в компоненте моих альбомов я получаю сообщение об ошибке:

Невозможно связать с routerLink, поскольку оно не является известным свойством a. ("

Компоненты альбомов и детализации альбомов находятся в "SharedModule". Это позволяет мне экспортировать список альбомов и компоненты сведений об альбоме и импортировать модуль общего доступа в модуль моих категорий, чтобы использовать их.

Куда следует импортировать RouterModule? Модуль моих альбомов или общий модуль? Или RouterModule может быть объявлен выше (appModule), чтобы покрыть все компоненты?

Модуль категорий

примечание: этот, кажется, работает нормально. Категория html может использовать routerLink нормально

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CategoriesComponent } from './categories.component';
import { MatProgressSpinnerModule } from '@angular/material';
import { SharedModule } from '../shared/shared.module'
import { RouterModule } from '@angular/router';


@NgModule({
  imports: [
    CommonModule,
    MatProgressSpinnerModule,
    SharedModule,
    RouterModule
  ],
  declarations: [
    CategoriesComponent,
  ]
})
export class CategoriesModule { }

Общий модуль

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatProgressSpinnerModule } from '@angular/material';
import { AlbumsListComponent } from '../albums/albums-list/albums-list.component';
import { AlbumDetailComponent } from '../albums/album-detail/album-detail.component';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    MatProgressSpinnerModule
  ],
  declarations: [
    AlbumsListComponent,
    AlbumDetailComponent,
  ],
  exports: [
    AlbumsListComponent,
    AlbumDetailComponent,
    RouterModule
  ]
})
export class SharedModule { }

Модуль Альбомы

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatProgressSpinnerModule } from '@angular/material';
import { SharedModule } from '../shared/shared.module'
import { RouterModule } from '@angular/router';


@NgModule({
   imports: [
      CommonModule,
      MatProgressSpinnerModule,
      RouterModule,
      SharedModule
   ],
   declarations: [],
   exports: []
})
export class AlbumsModule { }

app.router.ts

// Modules
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Components
import { CategoriesComponent } from '../categories/categories.component';
import { AlbumsListComponent } from '../albums/albums-list/albums-list.component'


const appRoutes: Routes = [

  {
      path: 'categories',
      component: CategoriesComponent,
  },
  {
      path: 'categories/:categoryId/albums',
      component: CategoriesComponent,
  },
  {
      path: 'categories/:categoryId/album/:albumId',
      component: AlbumsListComponent,
  },
  {
      path: '',
      redirectTo: 'categories',
      pathMatch: 'full'
  },
  {
      path: '**',
      redirectTo: 'categories',
      pathMatch: 'full'
  }
];


export const AppRouting: ModuleWithProviders =   RouterModule.forRoot(appRoutes);

0 ответов

Пожалуйста, импортируйте модуль маршрутизатора в правильный модуль.

import { RouterModule } from '@angular/router';

Ссылка: https://angular.io/guide/router

Другие вопросы по тегам