Angular2路由器鏈接不工作

如果我將鏈接移動到子組件，我的路由器鏈接從根組件和相同的鏈接不工作。 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

來源

2016-11-11 balaG

你應該在你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

來源

2016-11-11 17:51:12 Marcin

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

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

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

爲了使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{}

謝謝！

來源

2016-11-11 17:58:47

如果這是被導入一個模塊，那麼你可能也只是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指令，無論是在模塊文件或組件文件的模塊。

來源

2018-01-16 00:04:51

Angular2路由器鏈接不工作

回答

相關問題