Question

我对Angle 6还是陌生的，它是导航/路由，很抱歉，这听起来很明显。

我正在尝试使用一个具有导航到登录页面功能的按钮，但我不断收到此错误：

“错误：未捕获（承诺）：错误：无法匹配任何路由。URL段：'登录' 错误：无法匹配任何路线。网址段：“登录” 在ApplyRedirects.push ../ node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError“

我的html是：

<button ion-button (click) = "openLogin()" >Efetuar login</button>

我的路由器是：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';

const routes: Routes = [
  {
    path: 'login',
    outlet: 'login',
    component: LoginComponent
  },
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

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

我一直在研究此问题，只要该路径与路由器中定义的路径相对应就不会有任何问题，但我会不断遇到此错误。

Answer 1

尝试通过以下方式在导入中实施此操作：

RouterModule.forRoot(routes, {useHash: true});

代替：

RouterModule.forRoot(routes)

Answer 2

命名为router-outlet与普通router-outlet完全不同。

这就是命名为router-outlet的工作方式

1。像现在一样将outlet添加到路由对象

{
    path: 'login',
    outlet: 'login',
    component: LoginComponent
},

2。向router-outlet标签添加名称属性

 <router-outlet name="login"></router-outlet>

3。使用router.navigate

this.router.navigate([{ outlets: { login: [ 'login' ] }}]);

4。使用routerLink

[routerLink]="[{ outlets: { login: ['login'] } }]"

我建议您也阅读此post。

使用路由器Angular 6通过单击按钮创建导航功能时出错

2 个答案: