在 Angular 中使用路由数据的多个布局问题

问题描述

开发人员，

我有一个使用多种布局的应用程序（例如，登录路线没有导航栏，但仪表板路线有导航栏 + 页脚）。我正在做的是在路由定义的 if (amount < 600) { // Write all the under-600 cases here,using `if` and `else if`. // Execute a printf after all code for the under-600 cases. printf("\nThank you %s for your contribution!",name); } else { // Handle the 600-or-over case here. } break; 属性中添加要使用的布局，例如：

data

然后在路线更改时在 const routes: Routes = [ { path: 'login',component: LoginComponent,data: { layout: Layouts.FooterOnly } },]; 中设置要使用的布局。不过，有些奇怪的事情正在发生，要确切地解释出了什么问题有点困难。可以通过在下面的示例存储库中执行以下操作来重现该错误：

1. 从仪表板路由导航到登录路由。
2. 导航回仪表板路线。
3. 导航到用户路由。

出于某种原因，路由器插座随后停止工作并始终显示仪表板页面的内容（即AppComponent）。没有错误，我无法确定为什么会发生这种情况。有人可以解释一下如何处理这个问题吗？

存在问题的示例存储库： https://stackblitz.com/edit/routing-layouts-xv1s8k

解决方法

因为你有两个路由器插座

你可以把你的路由器插座放在一个 ng-template 中 并将其传递给您的布局组件

这是你的 repo 改编的 https://stackblitz.com/edit/routing-layouts-jzgekp

,

该问题似乎与仪表板、用户和帐户设置之间的 this.layout 值没有区别这一事实有关。

我修改了你的代码如下：

 ngOnInit() {
    this.router.events.subscribe(data => {
      if (data instanceof RoutesRecognized) {
        this.layout = null;
        setTimeout(
          () => (this.layout = data.state.root.firstChild.data.layout)
        );
      }
    });
  }

这里首先要做的是通过设置为null来重置this.layout的值。允许 Angular 自我更新。然后在 settimeout 中将值设置为需要再次设置的值，这会强制 angular 重置该值并自行更新。

作为旁注，可能更好的方法是使用 shell 路由和非 shell 路由，而不是通过 data 属性调整布局。