如何在 Angular 7 中正确实现命名路由器插座？

Question

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

我在 Angular 官方网站和其他网站上尝试了教程。我需要一个导航栏（目前由 app-menu 模拟），旁边还有一个命名的路由器插座。当用户点击导航栏时，我想在它旁边显示组件。我的主路由器已用于其他用途

menu.component.html

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

home.component.html（描述应用菜单选择器）

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

app-routing.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'。

你能帮帮我吗？我是 Angular 新手！

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'] } }]);
  }