条件子工艺路线(Angular)

Question

是否可以将有条件显示作为默认的子路由？

我正在尝试让用户登陆特定的子路线，这取决于他们过去订购的东西(例如，登陆商店的频道页面，在线或社交)。

如果他们从商店订购，他们会转到商店的子路由。

如果他们没有从商店订购，那么他们会转到在线子路由。

如果他们没有从商店/儿童订购，他们会转到社交网站。

用户将不得不从>1个频道订购。

下面的方法可以工作，但是如果我点击从某个页面到Channel，然后在浏览器上单击Back，Channel页面显示为空(即，似乎应用程序默认为路由器插座的空页面。

下面是我的路由器模块

   {
      path: 'Channel/:id',
      component: ChannelComponent,
      children: [
        {
          path: 'Store', component: StoreComponent
        },
        {
          path: 'Online', component: OnlineComponent
        },
        {
          path: 'Social', component: SocialComponent
        }
      ]
    }

以下内容来自我的channel.component.ts

   ngOnInit(): void {
      this.orderedFromChannel= this.getTypes(this.userId); 
      if (this.orderedFromChannel['Store']) {
        this.showStore();
      } else if (this.orderedFromChannel['Online']) {
        this.showOnline();
      } else if (this.orderedFromChannel['Social']) {
        this.showSocial();
      } 
    }

      showStore() {
        this.router.navigate(["Store"], {relativeTo: this.route})
      }
      showOnline() {
        this.router.navigate(["Online"], {relativeTo: this.route})
      }
      showSocial() {
        this.router.navigate(["Social"], {relativeTo: this.route})
      }

以下内容来自我的channel.component.html

<router-outlet></router-outlet>

Answer 1

要设置默认路由，您可以在子数组的底部设置空路径"“。因此，如果两个子节点的路由都不匹配，它将转到最后一条路径。如下所示：

{
  path: 'Channel/:id',
  component: ChannelComponent,
  children: [
    {
      path: 'Store', component: StoreComponent
    },
    {
      path: 'Online', component: OnlineComponent
    },
    {
      path: 'Social', component: SocialComponent
    },
    {
      path: '', component: StoreComponent //if you want store to be default
    },
  ]
}

或者，您可以使用重定向：

{
  path: 'Channel/:id',
  component: ChannelComponent,
  children: [
    {
      path: 'Store', component: StoreComponent
    },
    {
      path: 'Online', component: OnlineComponent
    },
    {
      path: 'Social', component: SocialComponent
    },
    {
      path: '', redirectTo: 'Store' //if you want store to be default
    },
  ]
}