首页 文章

尝试访问github路由时出错

提问于
浏览
1

我正在尝试将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() {}

}

这是种子应用程序的模板:

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

}

1 回答

  • 1

    对于github,你可以用href给锚元素

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

相关问题