Как правильно реализовать названную розетку роутера в angular 7?

Question

Я застрял с проблемой в моем коде. Я пытаюсь сделать именованный маршрут работающим, но не могу понять, что я делаю неправильно.

Я попробовал туториал на официальном сайте и других сайтах. Мне нужно иметь навигационную панель (на данный момент смоделированную через 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>

приложение-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: "дом".

Не могли бы вы мне помочь? Я новичок в угловой!

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