angular - 将输入数据传递到延迟加载的 Angular 模块中

Question

我有一个名为 NewsComponent 的组件，它在我的应用程序中共享。我想将它扩展成一个 NewsModule 并添加一个路由系统来显示个别文章，这样我的路由看起来像

/some-component
/some-component/news
/some-component/news/article/12345
/other-component
/other-component/news
/other-component/news/article/23456

为了使其路由相对，我延迟加载模块:

const routes: Route = [
  {
    path: 'some-component',
    component: SomeComponent
  },
  {
    path: 'some-component/news',
    component: SomeNewsWrapperComponent,
    children: [
      {
        path: '',
        loadChildren: './news/module#NewsModule'
      }
    ]
  }
  // same for /other-component
]

问题是 NewsComponent 根据一些输入数据显示视觉效果，而我过去常常通过 @Input 传递它。但是现在组件被封装在它的延迟加载模块中，这不再是可能的。

我可以在同时导入 NewsModule 和 AppModule 的第三个模块中创建一个 NewsService 并以这种方式传递数据，但我觉得这是违反模块化并希望避免它。单向数据流入模块是否有更好的解决方案？

Answer 1

我认为除了这两种方法之外，没有其他方法可以传递数据(如果你延迟加载)。

1. 查询参数的使用
2. 拥有共享服务

根据我的理解，模块化就是您的设计。如果您有大量数据要传递给您的延迟加载模块，那么您肯定应该在错误的地方破坏了您的模块。当您进行延迟加载时，您应该传递最少数量的信息，以便这些信息可以通过一些查询参数传递。

如果你有共享服务，是的，它是克服上述问题的解决方案，但是，是的，它也违反了模块化，但这是一个设计问题。在最合适的级别使用延迟加载使设计更加完美，并且不会在模块化方面产生任何问题。