routes - 如何在 Angular 7 中正确实现命名路由器导出？

Question

我的代码遇到了问题。我正在尝试使命名路线有效，但我无法找出我做错了什么。

我在 Angular 官方网站和其他网站上尝试了教程。我需要有一个导航栏(目前由应用程序菜单模拟)，旁边还有一个命名的路由器导出。当用户单击导航栏时，我想在其旁边显示组件。我的主路由器已用于其他用途

menu.component.html

<a [routerLink]="[{ outlets: { main: ['users'] } }]">Users</a>

home.component.html(描述应用程序菜单选择器)

<app-menu></app-menu>
<router-outlet name='main'></router-outlet>

应用程序路由.module.ts

const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuardService] 
},
{ path: 'users', component: UsersComponent, outlet: 'main', canActivate: [AuthGuardService] 
},
{ path: '', redirectTo: '/home', pathMatch: 'full' },
];

当我单击“用户”链接时，出现以下错误:

错误:无法匹配任何路由。 URL 段:'home'。

你能帮我一下吗？我是角度新手!

Answer 1

 <a [routerLink]="[{ outlets: { main: ['users'] } }]">
    users
</a>

/////////////////或

<button (click)="Users()" > users</button>

// in the component
  import { Router } from '@angular/router';

  constructor(private router: Router) {
  }
  users() {

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