Angular2 routerLink

Question

Ich habe mich mit Angular 2 angelegt und bin steckengeblieben. Die Startseite enthält eine Liste der zu lernenden Themen (TopicsComponent). Wenn Sie sie anklicken, wird vorerst der Pfad "**" ausgelöst. PageNotFoundComponent verwendet auch TopicsComponent, um Themen anzuzeigen, aber RouterLink funktioniert nicht mehr.

Beispiel: in der ersten Seite, wenn ich angular2 Link klicke, bekomme ich URL /angular2. Aber wenn PageNotFoundComponent aktiv ist i erhalten url /angular2/(angular2)

Hier ist der Code:

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> 

Seite-not-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 { } 

Seite-not-found.component.ts

<h1>Page not found!</h1> 

<topics></topics> 

Answer 1

Versuchen Sie pathMatch zu Ihrer Standardroute hinzuzufügen und stellen Sie sicher, dass Ihre HTML-Datei eine Basis href '/' anstelle von '.' wenn das benutzt wird.

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

URLs wie folgt: '/ angular2/(angular2)' sollen den Weg zu zwei verschiedenen RouterOutlets um anzuzeigen, außerhalb der Standardsteckdose die Parens und eine sekundäre/auxiliary Steckdose innerhalb der Parens. Nicht sicher, warum dies in Ihrem Code passiert, da ich keine RouterOutlets sehe. Können Sie ein Beispiel für Plunker (oder eine andere Website, auf der Sie Angular2-Beispielanwendungen ausführen können) erstellen?