无法匹配任何路线

Question

我的组件出现了，但我在加载页面时收到一条错误消息。看了一堆资源，我似乎根本无法解决错误信息。

错误

EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].

main.component.ts 在 index.html 中，页面加载后立即显示上述错误消息。

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

import { LoginComponent } from './login/login.component';

@Component({
    selector: 'main-component',
    template: 
      ' <header>
           <h1>Budget Calculator</h1>
           <a id='login' [routerLink]="['/login']">Login</a>
           <router-outlet></router-outlet>
        </header> '
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@Routes([
    {path: '/login', component: LoginComponent}
])

export class MainComponent {}

login.component.ts 通过 main.component.ts 路由，并且在我单击 link 时确实显示，尽管有错误消息。现在我将其样式设置为在 main.component 中的其他元素上弹出，但希望它是页面上显示的唯一组件。如果可能的话，基本上用 login.component 替换 index.html 中的 main.component，而不是做一大堆样式来显示：none.

import { Component } from '@angular/core';

@Component({
    selector: 'login',
    template: 
        ' <div id="login-pop-up">
              <h6 class="header_title">Login</h6>
              <div class="login-body">
                   Some fancy login stuff goes here
              </div>
          </div> '
})

export class LoginComponent {}

Answer 1

这可能是因为您的服务器需要针对 HTML5 pushState 配置，如

还要确保 <base href="/"> 标签位于 <head> 标签的开头或由 boostrap(...) 提供，如

如果您没有 / 的路线，您可能需要让应用程序强制导航到初始路线，如

提示：@angular/router 路由器也被弃用为 @angular/router-deprecated 并且将再次运送新路由器 :-/ 如果您要切换到 @angular/router 最好推迟到新的和希望最终的路由器可用。

Answer 2

请确保在您的 head 标签中添加 <base href="/"> 标签，您可以像这样使用 useAsDefault: true attr :

@Routes([
    {path: '/login', component: LoginComponent,useAsDefault: true}
])

Answer 3

只需为“”添加一条路线，例外情况就会发生。

{ 
    path: '', 
    component: HomeComponent 
}

Answer 4

当我遇到这个问题时，我通常会添加

<base href="./">

到 html 文件的 <head> <base href="./"> </head>。

然后在 NG2 中导入任何文件时

import { Auth }                 from './auth.service';

这是根据 documentation 做基础的首选方法，

Answer 5

如果你有子组件并且你想使用这种方式导航

路由器服务

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'enter',
        component: EnterDetailsComponent,
      },
      {
        path: 'find',
        component: FindDetailsComponent,
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这样使用 navigate([]) 方法

组件构造函数

这就是 this._router 的来历

constructor( private _router: Router) {}

this._router.navigate(['/home/find']);

无法匹配任何路线

Cannot match any routes

angular2-routing

angular