Question

我很难放置RouterModule来防止路由器链接html错误。

类别组件

显示类别列表
通过将albums元素添加到类别html中来显示这些类别中的相册列表：<app-albums></app-albums>
单击类别将显示<app-albums>内的相关内容

相册组件

单击相册将更改路由并显示其他组件
现在左侧将是相册列表
单击相册时，通过添加<app-album-detail></app-album-detail> html元素以“导入”相册详细信息组件，右侧将显示相册详细信息

问题

我已经将RouterModule添加到Categories模块，该模块允许我在HTML中使用[RouterLink]。但是，当我尝试在相册组件中使用[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);

Angular6-导入RouterModule的位置以防止“由于它不是'a'的已知属性，因此无法绑定到'routerLink'

0 个答案: