基于角度 8 条件的路由

Question

我正在尝试将路由实现为 - 在 router-outlet 中为 gsearch 使用 'name'。当 gsearch 条件匹配时 <router-outlet name="gsearch"></router-outlet> 应打开视图其余 router-outlet 不应显示任何视图。

"gsearch" routlet-outlet 或其他 router-outlet 应根据路由条件同时工作。

如何实现这个目标？

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

您可以使用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.providers 中导入 AuthGuard。module.ts

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

基于角度 8 条件的路由

routing based on conditions in angular8

angular

angular8

app.component.html

routing.ts