在命名插座中加载公共组件答案

【问题标题】：Load a common component in named outlet在命名插座中加载公共组件
【发布时间】：2020-04-02 15:48:18
【问题描述】：

我有一个要求，我有一个只有登录组件的登录页面。一旦有人登录，用户就会进入具有左侧导航和右侧组件的页面。借助此左侧导航，人们可以导航到不同的组件。

所以问题是，左侧导航组件应该在登录后的所有页面上都可用，而不是在登录页面上。

我尝试在https://stackblitz.com/edit/angular-common-component-in-named-router-outlet 复制相同的内容，但它只是加载导航组件。路由器配置看起来像

[
    { path: "", component: HomeComponent },
    {
        path: "messages",
        component: NavComponent,
        children: [{ path: "", component: MessagesComponent, outlet: "content" }]
    },
    {
        path: "users",
        component: NavComponent,
        children: [{ path: "", component: UsersComponent, outlet: "content" }]
    }
];

【问题讨论】：

你需要检查用户是否登录。并且可能在您不想显示的组件上添加*ngIf="user$ | async" 类似的东西，除非有条件。如果你不想去那个页面，你可以使用路由器中的canActivate选项。
国际海事组织命名的网点是一个错误（一般来说也是一个错误）。只需构建您的应用程序，以便您拥有登录组件，然后是具有导航和常规主要出口的主要组件

标签： angular angular-ui-router

【解决方案1】：

命名的出口是一个 PITA，不值得麻烦，特别是对于这个，你可以这样做：

[
    { path: "", component: HomeComponent },
    {
        path: "messages",
        component: NavComponent,
        children: [{ path: "", component: MessagesComponent}]
    },
    {
        path: "users",
        component: NavComponent,
        children: [{ path: "", component: UsersComponent }]
    }
];

并在您的导航组件中粘贴一个普通的<router-outlet></router-outlet>...在此结构中不需要名称。但我认为您最好使用如下结构：

[
    { path: "", component: HomeComponent },
    {
        path: "main",
        component: NavComponent,
        children: [
          { path: "messages", component: MessagesComponent},
          { path: "users", component: UsersComponent }
        ]
    }
];

和导航组件中的相同路由器插座。唯一的区别是您在登录路径前加上“main”前缀，因此您无需一遍又一遍地重复您的路线以匹配它们

【讨论】：