Angular2路由器链路

我一直在搞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]);

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)
];

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

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);
    }

}

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

<h1>Page not found!</h1>

<topics></topics>

应用程序路由.ts

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

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

bootstrap(AppComponent, [appRouterProviders]);

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)
];

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

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);
    }

}

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

<h1>Page not found!</h1>

<topics></topics>

应用程序组件.ts

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

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

bootstrap(AppComponent, [appRouterProviders]);

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)
];

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

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);
    }

}

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

<h1>Page not found!</h1>

<topics></topics>

topics.component.ts

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

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

bootstrap(AppComponent, [appRouterProviders]);

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)
];

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

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);
    }

}

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

<h1>Page not found!</h1>

<topics></topics>

topics.component.html

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

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

找不到页面。组件.ts

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

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

bootstrap(AppComponent, [appRouterProviders]);

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)
];

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

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);
    }

}

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

<h1>Page not found!</h1>

<topics></topics>

找不到页面！

类似这样的URL:“/angular2/（angular2）”表示指向两个不同RouterOutlet的路径，即Paren外部的默认出口和Paren内部的辅助/辅助出口。但我不知道为什么会在代码中出现这种情况，因为我没有看到任何RouterOutlet。你能在Plunker（或其他一些允许你做Angular2示例应用程序的网站）上举个例子吗？

类似这样的URL:“/Angular2/（Angular2）”表示两个不同RouterOutlet的路径，Paren外部的默认出口和Paren内部的辅助出口。但我不知道为什么会在代码中出现这种情况，因为我没有看到任何RouterOutlet。你能在Plunker（或其他一些允许你做Angular2示例应用的网站）上举个例子吗？

尝试将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)
];

---

尝试将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)
];

---

topic.title

？topic.title='angular2'Try

[routerLink]='/'+topic.title“

topic.title？topic.title='angular2'Try

[routerLink]='/'+topic.title”的值是多少