首页 文章

RouterLink无法在子组件中工作

提问于
浏览
2

我有一个简单的应用程序,在我的主app.html文件中具有以下结构 .

<navigation-list [unreadEmailCount]="unreadEmailCount| async"></navigation-list>
    <router-outlet></router-outlet>

在我的导航列表组件中,我可以轻松创建routerLinks,如下所示:

<a routerLink="/starred" routerLinkActive='active'>link</a>

但是,当我进入路由器插座内呈现的组件时,我无法使用routerLink . 但是,使用Router.route.nagive ['path']可以正常工作 . 任何线索为什么会这样?

编辑:

App路由器模块:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {AuthGuard} from "./auth/auth-guard";
import {UnauthGuard} from "./auth/unauth-guard";

const routes: Routes = [
  { path: '', redirectTo: '/inbox', pathMatch: 'full', canActivate: [UnauthGuard] }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  providers: [AuthGuard, UnauthGuard],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

照片路由器模块(这是routerLink不工作的地方)

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {PhotosComponent} from './photos/photos.component';
import { CreateAlbumComponent } from './album/create-album/create-album.component';
import { AlbumComponent } from './album/album/album.component'

const routes: Routes = [
  { path: 'photos',  component: PhotosComponent},
  { path: 'photos/:filter', component: PhotosComponent},
  { path: 'create-album', component: CreateAlbumComponent},
  { path: 'albums', component: AlbumComponent }
];

@NgModule({
  imports: [ RouterModule.forChild(routes) ],
  exports: [ RouterModule ]
})

export class PhotosRoutingModule {}

编辑:photosModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import {PhotoListComponent} from "./photo-list/photo-list.component";
import {PhotosService} from './shared/photos.service';
import { PhotogroupListComponent } from './photogroup-list/photogroup-list.component';
import { PhotogroupItemComponent } from './photogroup-item/photogroup-item.component';
import { PhotosComponent } from './photos/photos.component';
import {FileUploadComponent} from "./shared/file-upload";
import {FileUploadService} from './shared/file-upload.service';
import { ImageSearchComponent } from './image-search/image-search.component';
import {ImageSearchService} from "./image-search/image-search.service";
import {AlbumSelectComponent} from './album/album-select.component';
import { AlbumSelectBarComponent } from './album/album-select-bar/album-select-bar.component';
import { CreateAlbumComponent } from './album/create-album/create-album.component';
import { CreateAlbumService } from './album/create-album/create-album.service';
import { AlbumService } from "./shared/album.service";
import { AlbumListComponent } from './album/album-list/album-list.component';
import { AlbumItemComponent } from './album/album-item/album-item.component';
import { AlbumComponent } from './album/album/album.component';
import { PhotoNavBarComponent } from './photo-nav-bar/photo-nav-bar.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    PhotoListComponent,
    PhotogroupListComponent,
    PhotogroupItemComponent,
    PhotosComponent,
    FileUploadComponent,
    ImageSearchComponent,
    AlbumSelectComponent,
    AlbumSelectBarComponent,
    CreateAlbumComponent,
    AlbumListComponent,
    AlbumItemComponent,
    AlbumComponent,
    PhotoNavBarComponent
  ],
  providers: [
    PhotosService,
    FileUploadService,
    ImageSearchService,
    CreateAlbumService,
    AlbumService
  ]
})

export class PhotosModule { }

export {PhotosService, FileUploadService, ImageSearchService, CreateAlbumService, AlbumService}

1 回答

  • 8

    如果子组件来自不同的模块,那么您需要确保此模块在 imports 中具有 RouterModule

    @NgModule({
      imports: [CommonModule, RouterModule],
      declarations: [NavigationListComponent],
      exports: [NavigationListComponent],
    })
    export class SomeSharedModule{}
    

相关问题