2016-12-08 17 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:

の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 {} 

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

関連する問題