Question

我希望能够为某些路由使用相同的路由器插座。

路由设置（简化）：

/app/category/1/post/1

例如，我们有这条路径：

/app - AppComponent
|_ /catory/1 - CategoryComponent
   |_/post/1 - PostComponent

闯入

AppComponent

<router-outlet>有CategoryComponent呈现PostComponent，但是当该路线处于活动状态时，也应该呈现CategoryComponent。

此类问题的常见答案：

移动子路线并将其添加到app-route子阵列

没有。这不是正确的方法。我们仍然需要我们的路线层次结构。 PostComponent可能会知道Breadcrumb无法解决的问题 - 例如<router-outlet>命名

所以我们仍然希望加载CategoryComponent。（即使它的视图不是渲染）

在CategoryComponent

内使用CategoryComponent

没有。 <router-outlet>不应该由自己PostComponent负责。 CategoryComponent应该代替null呈现，并添加CSS以将其放置为非法。

我怎样才能实现这种行为？

我是否需要编写自己的路由器插座？

这会在Angular4中解决吗？

欢迎任何提示！感谢

Answer 1

如果我做对了，你可以尝试使用像＃34;包装＆＃34;这样的东西来解决问题。这种方式（我没有测试过这段代码，但它应该可以工作;阅读内联注释）：

export const routes: Routes = [
    {
        path: 'app',
        component: AppComponent,
        children: [
            {
                path: 'category/:id', // app/category/:id/
                children: [
                    {
                        path: '', // app/category/:id/ => By default, empty paths serve as if they were the parent path.
                        component: CategoryComponent,
                        children: [ // These children will be inside the <router-outlet> of the CategoryComponent.
                            {
                                path: 'subcategory1', // app/category/:id/subcategory1
                                component: PostComponent,
                            },
                            {
                                path: 'subcategory2', // app/category/:id/subcategory2
                                component: PostComponent,
                            }
                        ]
                    },
                    { // The PostComponent will use AppComponent as its parent; will be loading inside the <router-outlet> of AppComponent.
                        path: 'post/:id', // app/category/:id/post/:id
                        component: PostComponent
                    }
                ]
            }
        ],
    },
];

Answer 2

答案here将起作用。

取决于构建面包屑的方式，您可能必须将children: []与path: ''嵌套在一起。

孩子将在其父母链中找到的第一个部分中渲染。
路由器将从所有path属性中构建出一条路径，如果有''，则将仅使用父项path属性。
面包屑生成器还将沿孩子链走，但是如果找到data: {breadcrumb: 'crumb'}或data: {title: 'crumb'}或所需的内容，它将构建到面包屑链中。

因此，您可以根据需要制作面包屑，并根据需要设置路径，但是只要不嵌套组件，就可以得到想要的东西。

export const routes: Routes = [
  {
    path: 'app',
    component: AppComponent,
    data: {
      title: 'App',
    },
    children: [
      {
        path: 'category/:id',  // appends to path `app`
        children: [
          {
            path: '',
            data: {
              title: 'Category',  // appends to breadcrumb `App`
            },
            children: [
              {
                path: '',
                component: CategoryComponent,  // renders in `AppComponent`
                data: {
                  title: '',  // Specify a blank on so that we don't duplicate the parent one
                },
              },
              {
                path: 'post/:id',  // appends to path `app/category/:id`
                component: PostComponent,  // renders in `AppComponent`
                data: {
                  title: 'Post',  // appends to breadcrumb `App / Category`
                },
              },
            ],
          },
        ],
      },
    ],
  },
];

Answer 3

由于我们同时处于Angular 7，并且似乎没有相关文档，所以我想没有简单的现成的解决方案。

我有一个非常类似的问题：延迟加载的模块的子路由应呈现在应用程序组件的出口内，而不是在延迟加载的模块的出口内。我正在与lazy loaded modules合作，但是您可能可以将此想法转换为您的用例。我可以通过在预期的出口水平上定义相应的路线来解决此问题，这意味着在AppRoutes内部（我认为没有其他方法）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'category/:cid',
    loadChildren: './category/category.module#CategoryModule',
  },
  {
    path: 'category/:cid/post/:pid',
    loadChildren: './category/post/post.module#PostModule'
  },
];

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

这样，我至少可以保证文件夹结构和URL层次结构保持我希望的样子。为了解决您提到的状态管理问题，我将反序列化PostComponent或PostRoute中有关类别的数据。但是，这可能会带来一些不必要的冗余。

对我来说，这远非理想，因为我无法按照自己的方式将内容封装在延迟加载的模块中。但是：它正在工作。

在与父（父）相同的路由器插座中使用子路由

3 个答案: