2016-12-08 5 views
1

기본 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} 
+0

경로 구성을 추가 imports에서, 또한'<라우터 콘센트> 추가 한'자녀의 구성 요소, 코드를 추가하여 도움을 받으십시오. –

+0

제안 해 주셔서 감사합니다. 위의 라우터 모듈을 모두 – user3642173

답변

4

아이 컴퍼넌트 인 경우이 모듈이 확인해야하고 다른 모듈에서 RouterModule

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

위에 추가했습니다. 내가 볼 수있는 것에서는 이미 포함되어 있지만 무언가를 놓칠 수도 있습니다 – user3642173

+0

"routerLink를 사용할 수 없습니까?"라는 말은 정확히 무엇입니까? –

+0

이 코드 link은 링크로 평가되지 않습니다 (즉, 커서가 포인터로 변경되지 않음). 클릭 할 때 아무런 반응이 없음을 의미합니다. – user3642173

관련 문제