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

Question

我是角度6的新手，它是导航/路线选择，如果听起来很抱歉，对不起。

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

“错误：未捕获（承诺）：错误：无法匹配任何路由。URL段：'登录'错误：无法匹配任何路由。URL段：在ApplyRedirects.push ../ node_modules / @ angular / router / fesm5上的'login' /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
},

router-outlet2.为标签添加name属性

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

3.使用router.navigate

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

4.使用routerLink

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

我建议您也阅读这篇文章。