【问题标题】:Error trying to reach github route尝试到达 github 路由时出错
【发布时间】:2016-05-29 00:00:48
【问题描述】:

我正在尝试将 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 路线之外,所有路线都在工作,出现此错误:

异常:错误:未捕获(承诺中):无法匹配任何路由。 当前段:'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}]);
      });
  }

}

【问题讨论】:

    标签: angular angular2-routing


    【解决方案1】:

    到 github 你可以用 href 提供锚元素

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

    【讨论】:

    • 是的,但它有一些问题,例如我正在使用 '#' 路由策略,所以我必须使用 "#/github/repo-list/angular" 但稍后我会想要使用位置历史策略,我不想更改我的应用程序中的链接,需要有一个更角度的方式来做到这一点
    猜你喜欢
    • 2020-12-16
    • 2019-01-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-11-17
    • 2016-03-18
    • 2020-12-03
    相关资源
    最近更新 更多