CODEWITHSUNDEEP
routesangular7named-routing
xavatic
xavatic

Reputation: 185

How to correctly implements named router outlet in angular 7?

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!

Upvotes: 3

Views: 1892

Answers (1)

سعید دالوند
سعید دالوند

Reputation: 155

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

Upvotes: 0

Related Questions