Angular2 routerLink

Question

我一直在搞亂Angular 2而陷入困境。 首頁包含要學習的主題列表（TopicsComponent）。點擊它們將觸發路徑：'**'。 PageNotFoundComponent也使用TopicsComponent來顯示主題，但routerLink不再工作。

示例：在首頁，當我單擊angular2鏈接時，我得到url / angular2 。 但是當PageNotFoundComponent處於活動狀態時，我得到url / angular2 /（angular2）

這是代碼：

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { appRouterProviders }   from './app.routes';

import { AppComponent } from './app.component';

bootstrap(AppComponent, [appRouterProviders]);

app.routes.ts

import { provideRouter, RouterConfig }  from '@angular/router';

import { TopicsComponent } from './topics/topics.component';
import { PageNotFoundComponent } from './notfound/page-not-found.component';

const routes: RouterConfig = [

 {
  path: '',
  component: TopicsComponent
 },
 {
  path: '**',
  component: PageNotFoundComponent
 }
];

export const appRouterProviders = [
  provideRouter(routes)
];

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopicsService } from './shared/topics.service';
import { TopicsComponent } from './topics/topics.component';
import { PageNotFoundComponent } from './notfound/page-not-found.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [KoodikoguService],
  precompile: [TopicsComponent, PageNotFoundComponent]
})
export class AppComponent { }

topics.component.ts

import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopicsService } from './shared/topics.service';

@Component({
  selector: 'topics',
  templateUrl: 'app/topics/topics.component.html',
  directives: [ROUTER_DIRECTIVES] 

})

export class TopicsComponent { 
    title = 'Welcome to the topics component!';
    topics:any;

    constructor(private _dataService: TopicsService) {

    }

    ngOnInit() {
        this._dataService.getTopics().then(topics => this.topics = topics);
    }

}

topics.component.html

<h1>{{ title }}</h1>

<div *ngFor="let topic of topics">
    <a [routerLink]="topic.title" routerLinkActive="active">{{ topic.title }}</a>
</div>

頁面-不found.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { TopicsComponent } from '../topics/topics.component';

@Component({
  selector: 'not-found',
  templateUrl: 'app/notfound/page-not-found.component.html',
  directives: [TopicsComponent]

})
export class PageNotFoundComponent { }

頁面-不found.component.ts

<h1>Page not found!</h1>

<topics></topics>

Answer 1

像這樣的URL：'/ angular2 /（angular2）'用於表示兩個不同的RouterOutlets的路徑，parens外的默認出口，以及parens內的輔助/輔助出口。 不知道為什么會在你的代碼中發生這種情況，因為我沒有看到任何RouterOutlets。 你能舉一個關於Plunker（或其他一些讓你做Angular2示例應用程序的網站）的例子嗎？

Answer 2

嘗試將pathMatch添加到默認路由，並確保您的html文件具有基本href'/'而不是'。' 如果這是使用。

import { provideRouter, RouterConfig }  from '@angular/router';

import { TopicsComponent } from './topics/topics.component';
import { PageNotFoundComponent } from './notfound/page-not-found.component';

const routes: RouterConfig = [

 {
  path: '',
  component: TopicsComponent,
  pathMatch: 'full'
 },
 {
  path: '**',
  component: PageNotFoundComponent
 }
];

export const appRouterProviders = [
  provideRouter(routes)
];