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