3

I am stuck with a problem on my code. I'm trying to make named route works but I cannot find out what I'm doing wrong.

I tried the tutoriel on angular official site and others sites. I need to have a nav bar, (simulated by app-menu for the moment), and a named router outlet beside. When the user clicks on the nav bar, I want to display components beside it. My primary router is already used for something else

menu.component.html

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

home.component.html (Describe app-menu selector)

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

When I click on Users link I got the following error :

Error: Cannot match any routes. URL Segment: 'home'.

Could you please help me? I'm new to angular!

xavatic
  • 185
  • 1
  • 2
  • 10

1 Answers1

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

///////////////// or

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

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

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

   this.router.navigate([{ outlets: { main: ['users'] } }]);
  }
سعید دالوند
  • 155
  • 1
  • 6
  • 1
    While this code snippet may be the solution, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-‌​code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Johan May 09 '19 at 04:24