Angular2 routerLink

Question

私は角2をつまんでいて、立ち往生しています。トップページには学習するトピックのリスト（TopicsComponent）があります。クリックすると、パスは '**'になります。 PageNotFoundComponentはトピックを表示するのにTopicsComponentも使用しますが、routerLinkはもう動作しません。

例：最初のページで、angle2のリンクをクリックすると、私は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

0このような

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

デフォルトルートに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) 
]; 

Answer 2

のURL： '/ angular2 /（angular2）' は、2つの異なるRouterOutletsへのパスを示すことを意味する、デフォルトの出口外括弧、および括弧内の二次的/補助的なアウトレット。あなたのコードでなぜこれが起こっているのかわかりません。なぜなら私はRouterOutletsを見ないからです。 Plunker（またはAngular2のサンプルアプリケーションを実行できる他のサイト）にサンプルを置くことはできますか？