angular 4 防止在部分路径上显示组件

Question

在我的应用程序中，我按以下方式设置路由：

app-routing.module

{path: 'login', loadChildren:'./components/login/login.module#LoginModule'}

登录-routing.module

{
  path:'main', <--- contains router outlet, shows frame design, login/main
  component: LoginLoaderComponent,
  children: [
      { path: 'withsms', component: LoginWithSmsComponent } <--- login/main/withsms one of the login pages
  ]
{

login/main - 是来自所有嵌套登录组件（不同登录页面）的框架，并包含一个 router-outlet 所有这些的通用设计。
当用户导航到 login/main - 他只看到部分组件

问题是如何防止这种情况发生，并将用户导航到默认页面？

Answer 1

这是因为您在 /login/main 没有任何默认组件可以显示。我建议你像这样重写 login-routing.module.ts。

[
  { path: '', component: LoginSelectionComponent }, <--- Login Selection , URL will be /login/ itself
  { path: 'withsms', component: LoginWithSmsComponent } <--- login/withsms one of the login pages
]

你也可以设置其他登录方式...

Answer 2

最后，我解决这个问题的方法是使用 canActivate，我过去曾将其用于服务器端身份验证，以获得导航到页面的权限。在这种情况下，我只是分析了路线，看它的长度是否符合路线约定

属于： /container-component/nested-component

并且只有 /container-component 组件的路径不会显示空容器。我通过检查路径的长度来验证它是否超过 1 的长度来做到这一点，在这种情况下，它会通过 return 和 [=39= 解析为找到的 url ](true)，否则它将重新导航并 return Observable.of(false)

解决方案如下所示：

登录-routing.module

@Injectable()
export class LoginAuthGuard implements CanActivate {
constructor(private _router: Router) {}
// check here if navigated route confirms to convention
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let urlArr = state['url'].split('/');
    urlArr = urlArr.splice(2,urlArr.length-1);
    if(urlArr.length > 1) {
        // if it does let it be resolved
        return Observable.of(true);
    }else {
        // if it doesn't navigate to a default page and return a false observable
        this._router.navigate(['login/main/withsms']);
        return Observable.of(false);
    }
}
}
const routes: Routes = [
{
  path:'main',
  component: LoginLoaderComponent,
  children: [
      { path: 'withsms', component: LoginWithSmsComponent }...
  ]
}
];

app-routing.module

const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/main/withpassword'},
{ path: 'login', loadChildren:'./components/login/login.module#LoginModule',
     canActivate:[LoginAuthGuard] <--- all routes to login/... will be checked by LoginAuthGuard
},
{ path: 'upload',loadChildren: './components/upload-page/upload-page.module#UploadPageModule'},
{ path: '**', pathMatch: 'full', redirectTo: 'login'}
];

angular 4 防止在部分路径上显示组件

angular 4 preventing from showing components on partial paths

angular

angular5

angular6