Angular路由组件属性能否设条件？无需守卫实现条件路由？

你直接在路由对象里嵌套if语句的写法是行不通的，因为JavaScript/TypeScript的对象字面量不允许在内部插入条件语句。不过可以通过以下几种方式实现条件设置component属性：

方式1：提前计算组件值 #

先根据条件确定要使用的组件，再写入路由配置：

const targetComponent = data === 1 ? Component1 : Component2;
const routes: Routes = [
  { path: '', component: targetComponent }
];

方式2：用三元表达式直接配置 #

如果逻辑简单，可以直接在路由对象里用三元表达式：

const routes: Routes = [
  { path: '', component: data === 1 ? Component1 : Component2 }
];

方式3：函数处理复杂条件 #

如果有多个分支判断，封装成函数返回目标组件更清晰：

function getTargetComponent() {
  if (data === 1) return Component1;
  else if (data === 2) return Component2;
  else return DefaultComponent;
}

const routes: Routes = [
  { path: '', component: getTargetComponent() }
];

无需Auth Guard的条件路由实现方法 #

除了上面的组件条件设置，还有这些思路：

• 动态生成完整路由数组
  根据条件拼接不同的路由规则，适合需要批量切换路由配置的场景：

let routes: Routes = [];
if (data === 1) {
  routes.push({ path: '', component: Component1 });
} else {
  routes.push({ path: '', component: Component2 });
}
// 添加共享路由
routes.push({ path: 'about', component: AboutComponent });

• 条件重定向
  如果只是需要根据条件跳转到不同路径，可以提前设置重定向规则：

const redirectPath = data === 1 ? 'component1' : 'component2';
const routes: Routes = [
  { path: '', redirectTo: redirectPath, pathMatch: 'full' },
  { path: 'component1', component: Component1 },
  { path: 'component2', component: Component2 }
];

• 组件内部动态切换
  如果路由路径固定，但要根据条件显示不同组件，可以在路由对应的父组件里用*ngIf或动态组件加载实现：

<!-- 父组件模板 -->
<app-component1 *ngIf="data === 1"></app-component1>
<app-component2 *ngIf="data !== 1"></app-component2>

内容的提问来源于stack exchange，提问作者ivy