防止直接访问 parent 组件

Question

我的一个模块中有这些路线：

const routes: Routes = [
  { path: '', redirectTo: 'public/intro', pathMatch: 'full'},
  { path: 'public', component: PublicComponent, data: { preload: true, delay: true, state: 'public' },
  children:
  [
    { path: 'intro', component: IntroComponent, data: { preload: true, delay: true, state: 'intro' },  },
    { path: 'explorar', component: ExplorarComponent, data: { preload: true, delay: true, state: 'explorar' }, },
    { path: 'cadastro', component: CadastroComponent, data: { preload: true, delay: true, state: 'cadastro' }, },
    { path: 'entrar', component: EntrarComponent, data: { preload: true, delay: true, state: 'entrar' }, },
  ]},
];

如何防止用户输入例如：

localhost:4200/#/public

并直接访问 parent 组件（public）？

我的意思是我只想允许这个特定区域的那些路线：

localhost:4200/#/public/intro

localhost:4200/#/public/explorar

localhost:4200/#/public/cadastro

localhost:4200/#/public/entrar

事实是，我在 PublicComponent 中有一个 router-outlet。我在那里加载了 4 children。（带有路线按钮的工具栏）。

谢谢。

Answer 1

您可以使用无组件路由实现这一点，如here所述。

在你的情况下，你会得到类似的东西：

const routes: Routes = [
  { path: '', redirectTo: 'public/intro', pathMatch: 'full'},
  { path: 'public', children: [
    { path: 'intro', component: IntroComponent },
    { path: 'explorar', component: ExplorarComponent },
    { path: 'cadastro', component: CadastroComponent },
    { path: 'entrar', component: EntrarComponent },
  ]}
];

防止直接访问 parent 组件

Prevent to access parent component directly

angular-material

angular2-routing

angular6