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

Question

我是 Angular 6 的新手，它是导航/路由，如果这听起来很明显，我很抱歉。

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

"错误:未捕获( promise ):错误:无法匹配任何路由。URL 段:'login' 错误:无法匹配任何路由。网址段:“登录” 在 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

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

这就是 router-outlet 的工作方式

1.将 outlet 添加到您的路由对象，就像您现在所做的那样

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

2.给router-outlet标签添加name属性

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

3.使用router.navigate

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

4.使用routerLink

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

我建议您阅读这篇 post还有。