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路由，并在我点击链接时显示，尽管有错误消息。现在我将它设置为在main.component中弹出其他元素，但希望它是页面上显示的唯一组件。基本上用index.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 ，如Angular 2.0 router not working on reloading the browser

同时确保您在<base href="/">代码的开头有一个 <head> 标记，或由boostrap(...)提供Angular 2 router no base href set

如果您没有/的路线，则可能需要让应用导航到初始路线，如Angular2 router (@angular/router), how to set default route?

提示：@angular/router路由器也被弃用为@angular/router-deprecated，新的路由器将再次发货： - /如果您要切换到{{1}可能最好推迟到新的，希望最终的路由器可用。

Answer 2

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

<base href="./">

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

然后在NG2中导入任何文件

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

这是根据documentation做基数的首选方式，

Answer 3

如果您有子组件，并且您希望以这种方式导航

路由器服务

String

以这种方式使用navigate（[]）方法

组件构造函数

这就是this._router的来历

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

Answer 4

plz确保您的head标记中有<base href="/">标记，您可以像这样使用useAsDefault: true attr：

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

Answer 5

只需添加一条路线''例外即可。

{ 
    path: '', 
    component: HomeComponent 
}

无法匹配任何路线

5 个答案: