2016-11-11 44 views
8

如果我將鏈接移動到子組件,我的路由器鏈接從根組件和相同的鏈接不工作。 plunker代碼顯示工作鏈接和非工作鏈接。先謝謝你。以下是不工作的鏈接。Angular2路由器鏈接不工作

//our root app component 
import {Component} from '@angular/core' 

@Component({ 
    selector: 'my-menu', 
    template: ` 
    <div> 
    <a routerLink="/comp11" routerLinkActive="active">Crisis Center</a> | 
    <a routerLink="/comp12" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp21" routerLinkActive="active">Heroes</a> | 
    <a routerLink="/comp22" routerLinkActive="active">Heroes</a> 
    </div> 
`, 
}) 
export class AppLayout {} 

Plunker code with issue

回答

18

你應該在你AppLayoutModule導入RouterModule所以它看起來如下:

import {NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {AppLayout} from './layout.component'; 
import {RouterModule} from '@angular/router'; 

@NgModule({ 
    imports: [ BrowserModule, RouterModule ], 
    declarations: [ AppLayout ], 
    exports: [ AppLayout ] 
}) 

export class AppLayoutModule {} 

沒有它分量不知道routerLink是什麼,不編譯改正href屬性。

更新Plunker here

+0

嗨@Marcin,我很好奇,RouterModule是在AppRoutingModule中導入的,它對所有其他功能模塊都是可見的,所以我錯了嗎? – Howard

+0

@Howard,它不可見,因爲模塊不會繼承對其他模塊的組件,提供者等的訪問。因此,AppModule導入的內容對AppLayoutModule不可訪問/可見。 – Marcin

+0

嗨@Marcin,謝謝你的回答。這使我困惑不已。因此,如果我有第三方模塊A聲明幾個'組件',你的意思是我不能在任何其他功能模塊中使用它們,如果我只是'將這個模塊A'導入到根模塊?這有點奇怪,如果這個模塊A需要'forRoot'配置呢?我是否必須在每個功能模塊中「導入」和「配置」它取決於它? – Howard

1

爲了使routerlink工作,你必須導入路由器組件在您的工作

Import {Component} from '@ angular/core'; 
Import {Router} from '@ angular/router'; 

@Component ({ 
Selector: 'my-menu', 
template: 
<Div> 
<a [routerLink]=["/comp11"]> Crisis Center </a> 
<a <routerLink]=["/comp12"]> Heroes </a> 
<a [routerLink]=["/comp21"]> Heroes </a> 
<a <routerLink]=["/comp22"]> Heroes </a> 
</ Div> 
,}) 
Export class AppLayout{} 

謝謝!

0

如果這是被導入一個模塊,那麼你可能也只是RouterModule添加到您的模塊的進口獨立組件。我喜歡在我自己的文件中擁有模塊聲明,因此這裏的解決方案應該是具有應用程序模塊。

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import {RouterModule} from '@angular/router'; 
import {AppLayoutModule} from '...'; <--could also be a component 

@NgModule({ 
    declarations: [ 
     AppComponent 
    ], 
    imports: [ 
     AppLayoutModule, 
     BrowserModule, 
     RouterModule, 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {} 

你必須確保的唯一的事情是,RouterModule導入到使用routerLink指令,無論是在模塊文件或組件文件的模塊。