在命名插座中加载一个公共组件

Question

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

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

我试图在 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" }]
    }
];

Answer 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" 这样你就不需要一遍又一遍地重复你的路线来匹配它们

在命名插座中加载一个公共组件

Load a common component in named outlet

angular

angular-ui-router