Angular：如何将组件用作路由条目和另一个组件的模板

Posted 2023-03-13

【中文标题】Angular：如何将组件用作路由条目和另一个组件的模板

【英文标题】：Angular: How to use a Component as route entry and in another component's template

【发布时间】：2021-11-08 15:35:22

【问题描述】：

我面临以下问题：

我们有不同的组件，它们被加载到我们应用程序内的 iframe 中。现在我也想通过选择器标签以嵌入式方式使用这些组件之一。

所以给定的是一个 ComponentA：

@Component(
    
        selector: 'a',
        templateUrl: './a.component.html',
.....

在模块A中：

const routes: Routes = [
   path: '', component: AComponent,
];

@NgModule(
  declarations: [AComponent],
              imports: [
                  RouterModule.forChild(routes),
              ],
exports: [AComponent]
)
export class AModule  

这个 ComponentA 是通过 app.routing.module.ts 中的路由延迟加载的：

    path: 'a',
    loadChildren: () => import('./a/a.module')
        .then((m) => m.AModule),
,

ModuleB 中的另一个 ComponentB。

const routes: Routes = [
   path: '', component: BComponent,
];

@NgModule(
  declarations: [BComponent],
              imports: [
                  RouterModule.forChild(routes),
                  AModule,
              ],
exports: [BComponent]
)
export class BModule  

这个 ComponentB 是通过 app.routing.module.ts 中的路由延迟加载的：

    path: 'b',
    loadChildren: () => import('./b/b.module')
        .then((m) => m.BModule),
,

主 AppComponent 只是一个简单的路由器插座

import Component from '@angular/core';

@Component(
  selector: 'my-app',
  template: '<router-outlet></router-outlet>'
)
export class AppComponent 
  title = 'app';

现在我想在 ComponentB 的模板 (b.component.html) 中使用 ComponentA：

<div>Content ComponentB</div>
<div><a></a></div>

我遇到的是，AModule 中的 RouterModule.forChild(routes) 正在执行到 ComponentA 的路由，所以我的结果正文只包含 ComponentA：

<a></a>

当我删除 RouterModule.forChild(routes) 时，我可以使用 html 模板中的组件，但是我不能直接通过路由访问组件（app/#a）

我可以构建一个 moduleC 来处理组件 A 的路由，然后从 moduleA 中删除路由并将组件 A 嵌入到两个模块（moduleC 和 moduleB）中，但这感觉有点脏。

是否有机会同时以两种方式在模块内使用组件？

问候 格莫拉

【参考方案1】：

如果有人陷入同样的​​境地，这是我使用包装模块的解决方法：

这个模块

const routes: Routes = [
   path: '', component: A,
];

@NgModule(
              imports: [
                  RouterModule.forChild(routes),
                  AModule
              ],
    exports: []
)
export class AWrapperModule 

仅用于从角度路由进行路由

    path: 'a',
    loadChildren: () => import('./a/a-wrapper.module')
        .then((m) => m.AWrapperModule),
,

到必须更改的组件 A（删除路由的东西）：

@NgModule(
  declarations: [AComponent],
exports: [AComponent]
)
export class AModule  

就是这样。现在我可以通过选择器标签在另一个 html 模板中使用模块 A，并通过路由“直接”使用。我不知道是否有更简单的方法，但我没有为我的问题找到任何设置或配置。使用一个只有模块类的附加模块似乎没问题。