角度8中不同页面的不同布局/ html结构不起作用

Question

我尝试创建公共路由和安全路由，每个路由都具有不同的 html 结构（安全路由将具有仪表板感觉/外观，而公共路由具有更多营销类型的结构），但路由不起作用。我感觉我有太多 <router-outlets> 但我不是 100% 确定。

我的 AppRoutingModule 如下所示：

    const PUBLIC_ROUTES: Routes = [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'register', component: RegisterComponent },
      { path: 'login', component: LoginComponent },
      { path: 'request-demo', component: RequestDemoComponent },
      { path: '**', redirectTo: '' }
    ];

    const SECURE_ROUTES: Routes = [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent, canActivate: [ LoggedInGuard ] },
      { path: 'u',
        canActivate: [ LoggedInGuard ],
        children: [
          {
            path: ':id',
            component: UserDetailComponent,
            resolve: { user: UserDetailResolver },
            pathMatch: 'full',
          }
        ]
      }
    ];

    const routes: Routes = [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: '', component: PublicLayoutComponent, children: PUBLIC_ROUTES },
      { path: '', component: SecureLayoutComponent, children: SECURE_ROUTES }
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

app.component.html 只是 <router-outlet></router-outlet>

public-layout.component.html 是：

    <app-header></app-header>
    <router-outlet></router-outlet>

和secure-layout.component.html是：

    <app-header></app-header>
    <router-outlet></router-outlet>

成功登录后，我的登录服务应通过此路由器（使用路由器）将您从公共布局带到安全布局。

    this.router.navigate(["/dashboard"]);

但在登录时，这似乎不起作用，因为我仍在“/”而不是仪表板和控制台中，检查元素，<app-public-layout> 是正在显示的内容。

更新了 login.component.ts 登录功能：

    login() {
        if (this.authService.login(this.loginModel)) {
          this.loginModel.email = "";
          this.loginModel.password = "";
          console.log(
            "Welcome back " + this.authService.currentUser.firstName
          );
          this.router.navigate(["/dashboard"]);
        } else {
          console.log(
            "Email and/or password is incorrect. Please try again."
          );
          this.loginModel = {
            email: "",
            password: ""
          };
        }
      }

login function in auth service (using local user array for dev):

    login(userEmail: IUserLogin): boolean {
        const userExists = this.users.USERS.find(x => x.email === userEmail.email);
        if (userExists) {
          this.currentUser = userExists;
          localStorage.setItem('user', JSON.stringify(userExists));
          return true;
        } else {
          return false;
        }
      }

登录守卫：

    @Injectable()
    export class LoggedInGuard implements CanActivate {

        constructor(protected router: Router, protected auth: AuthService ) {}

         canActivate() {
            if (localStorage.getItem('access_token')) {
                return true;
            }
            // not logged in so redirect to login page
            this.router.navigate(['/']);
            return false;
        }
    }

Answer 1

你的问题是你的路由是如何配置的。

归结为问题路线留下以下配置：

const PUBLIC_ROUTES: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: '**', redirectTo: '' }
];

const SECURE_ROUTES: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent, canActivate: [ LoggedInGuard ] }
];

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '', component: PublicLayoutComponent, children: PUBLIC_ROUTES },
  { path: '', component: SecureLayoutComponent, children: SECURE_ROUTES }
];

当 url 为 / 时，当前路由器将尝试匹配的顶级路由有 3 个。

应该记住，声明路由的顺序很重要。路由器会按顺序检查。

1. { path: '', redirectTo: 'home', pathMatch: 'full' }

您的示例中的一个问题是路由 'home' 不存在。

此时/home不存在，所以路由器会回退到下一个路由...

1. { path: '', component: PublicLayoutComponent, children: PUBLIC_ROUTES }

路由器将匹配第一个孩子，并在其中找到另一个redirectTo: 'home'。然后这将回退到'**' 路径，该路径重定向到''。现在这是一条循环路径。我怀疑路由器会识别这一点并停留在 url /。它将呈现PublicLayoutComponent，而无需放入<router-outlet>。

1. { path: '', component: SecureLayoutComponent, children: SECURE_ROUTES }

路由器甚至没有尝试匹配此路径。

修复

'**' 应该从子路由中移出并移到顶级路由中。

顶级路由应该按照从最具体到最一般的顺序声明。

LoggedInGuard 应该移动到顶级路由，以免您在每个子路由上重新声明它。

您还需要确保添加 'home' 路由。

const PUBLIC_ROUTES: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'login', component: LoginComponent }
];

const SECURE_ROUTES: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent }
];

const routes: Routes = [
  { path: '', component: PublicLayoutComponent, children: PUBLIC_ROUTES },
  { path: '', component: SecureLayoutComponent, children: SECURE_ROUTES, canActivate: [ LoggedInGuard ] },
  { path: '**', redirectTo: '' }
];

演示：https://stackblitz.com/edit/angular-xzqvcr

免责声明：我没有浏览路由器的源代码。所以我不能声称知道它是如何解决循环路线的。我的回答是基于我在这种情况下的观察。

Answer 2

您无需将<router-outlet></router-outlet> 放在两个组件中。 从两个组件中删除路由器标签并将<router-outlet></router-outlet>放在父组件中，例如app.component.ts，如果未登录，则使用公共组件路由作为默认路由。