【问题标题】：routing based on conditions in angular8基于angular8条件的路由
【发布时间】：2019-06-26 11:45:40
【问题描述】：

我正在尝试将路由实现为 - 在 router-outlet 中具有 gsearch 的“名称”。当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"
 }

【问题讨论】：

标签： angular angular8

【解决方案1】：

您可以使用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;
    }
}

确保在 app.module.ts

的 providers 中导入 AuthGuard

【讨论】：

【解决方案2】：

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"
}

【讨论】：