маршрутизация на основе условий в angular8

Question

Я пытаюсь реализовать маршрутизацию как имеющую «имя» для gsearch в router-outlet.Когда gsearch условия соответствуют <router-outlet name="gsearch"></router-outlet> должно открыться, остальные router-outlet не должны отображать никакие представления.

Либо рулетка-розетка "gsearch", либо другая розетка-роутер должны работать одновременно, основываясь на условии маршрутизации.

Как достичь этой цели?

app.component.html

// if, else if, else conditions type

<router-outlet name="gsearch"></router-outlet> <=== gSearch opens here
<router-outlet name!="gsearch"></router-outlet> <=== rest routing should be here

routing.ts

{
        path: '',
        component: GSearchComponent,
        outlet: "gsearch"
 }
 {
        path: '',
        component: abcComponent,
        outlet: "abc"
 },
 {
        path: '',
        component: cdeComponent,
        outlet: "cde"
 }

Answer 1

app.component.html

<router-outlet name="gsearch"></router-outlet>
<router-outlet name="default"></router-outlet>

routing.ts

{
  path: '',
  component: GSearchComponent,
  outlet: "gsearch"
}
{
  path: '',
  component: abcComponent,
  outlet: "default"
}
{
  path: '',
  component: cdeComponent,
  outlet: "default"
}

Answer 2

Вы можете использовать концепцию Router Guard , чтобы разрешить маршрут.Например: в app-routing.module.ts вызовите canActivate свойство, подобное этому

{
        path: '',
        component: GSearchComponent,
        canActivate: [AuthGuard],
        data: {name: 'gsearch'}
 }

В Authguard компонент реализует ваш запрос как

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(route: ActivatedRouteSnapshot, state: RouterStateSnapshot, protected router: Router) { }

    canActivate() {
        let name = route.data.name as string;
        if (name !== 'gsearch') {
            this.router.navigate(['/']);
            return false;
        }
        return true;
    }
}

Обязательно импортируйте AuthGuard в ваших провайдерах из app.module.ts