기본 app.html 파일에 다음 구조의 간단한 응용 프로그램이 있습니다. 다음과 같이 내 탐색 목록 구성 요소에서RouterLink가 하위 구성 요소에서 작동하지 않습니다.
<navigation-list [unreadEmailCount]="unreadEmailCount| async"></navigation-list>
<router-outlet></router-outlet>
내가 쉽게 routerLinks를 만들 수 있습니다
그러나<a routerLink="/starred" routerLinkActive='active'>link</a>
, 내가 routerLink을 사용할 수 없습니다 라우터 콘센트에서 렌더링 구성 요소로 이동합니다. 하지만 Router.route.nagive [ 'path']를 사용하면 작동합니다. 이것이 어떤 단서일까요?
EDIT :
앱 라우터 모듈 :
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 {}
EDIT : 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}
경로 구성을 추가
imports
에서, 또한'<라우터 콘센트> 추가 한'자녀의 구성 요소, 코드를 추가하여 도움을 받으십시오. –제안 해 주셔서 감사합니다. 위의 라우터 모듈을 모두 – user3642173