Question

我正在尝试将beta路由器更改为新组件路由器，
我的项目是从官方的angular2种子开始的：https://github.com/angular/angular2-seed

这就是我的 seed-app.ts 的样子：

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

import {Home} from './components/home/home';
import {About} from './components/about/about';
import {RepoBrowser} from './components/repo-browser/repo-browser';

@Component({
  selector: 'seed-app',
  providers: [],
  pipes: [],
  directives: [ROUTER_DIRECTIVES],
  styles: [require('./seed-app.scss')],
  template: require('./seed-app.html'),
})
@Routes([
  { path: '/home',       component: Home},
  { path: '/about',      component: About},
  { path: '/github/...', component: RepoBrowser},
])
export class SeedApp {

  constructor() {}

}

这是seed-app的模板：

<div class="seed-app">
  <h3>
    Angular 2 Seed
  </h3>
  <nav>
    <a [routerLink]=" ['/home'] ">
      Home
    </a>
    |
    <a [routerLink]=" ['/about'] ">
      About
    </a>
    |
    <a [routerLink]=" ['/github/repo-list', {org: 'angular'}] ">
      Github Repos
    </a>
  </nav>

  <main>
    <router-outlet></router-outlet>
  </main>


  <footer>
    © 2016
  </footer>
</div>

所有路线都在工作，但我根本无法到达github路线，收到此错误：

EXCEPTION：错误：未捕获（在承诺中）：无法匹配任何路由。当前片段：'github'。可用路线：['/ home'，'/ about'， “/ github上/...'].

如果有帮助，这就是 repo-browser.ts

的代码

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

import {RepoList} from '../repo-list/repo-list';
import {RepoDetail} from '../repo-detail/repo-detail';
import {Github} from '../../services/github';

@Component({
  selector: 'repo-browser',
  template: require('./repo-browser.html'),
  styles: [require('./repo-browser.scss')],
  providers: [ Github ],
  directives: [ ROUTER_DIRECTIVES ],
  pipes: []
})
@Routes([
  {path: '/:org',       component: RepoList},
  {path: '/:org/:name', component: RepoDetail },
])
export class RepoBrowser {

  constructor(private router: Router, private github: Github) {}

  searchForOrg(orgName: string) {
    this.github.getOrg(orgName)
      .subscribe(({name}) => {
        console.log(name);
        this.router.navigate(['RepoList', {org: orgName}]);
      });
  }

}

Answer 1

对于github，您可以使用href

给出锚元素

 <a href="/github/repo-list/angular">
  Github Repos
</a>

尝试访问github路由时出错

1 个答案: