Question

我有问题，我不知道自己没看到什么。

我有Equis模块

ComponentsHomeModule，一个我要共享组件的文件

import { NgModule } from '@angular/core';
import { ElementComponent } from './element/element.component';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [ElementComponent],
  exports: [ElementComponent],
})
export class ComponentsHomeModule {}

在这种情况下，组件是ElementComponent，这就是我要共享的组件。

然后我有我要使用ElementComponent的ElementsModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ElementsRoutingModule } from './elements-routing.module';
import { ElementsComponent } from './elements.component';
import { ComponentsHomeModule } from '../../components/components-home.module';

@NgModule({
  imports: [CommonModule, ComponentsHomeModule, ElementsRoutingModule],
  declarations: [ElementsComponent],
})
export class ElementsModule {}

然后在ElementsComponent内部，我尝试渲染ElementComponent，但是当我在html中制作

ElementsComponent html:
<app-element></app-element>

在控制台中，我看到了错误

ERROR in src/app/home/pages/elements/elements.component.html:15:7 - error TS8001: 'app-element' is not a known element:
1. If 'app-element' is an Angular component, then verify that it is part of this module

我不知道错误在哪里，因为如果我将我的组件导入并导出到ComponentsHomeModule中，然后导入该模块，那么所有组件都应该工作。

通过尝试将ComponentsHomeModule导入App.Module而不进行任何操作的方式，在延迟加载中使用了我正在使用ComponentsHomeModule的模块：

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { ElementsRoutingModule } from './pages/elements/elements-routing.module';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: '',
        redirectTo: 'elements',
      },
      {
        path: 'elements',
        loadChildren: () => ElementsRoutingModule,
      }
    ],
  },
];

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

已解决：：

问题出在延迟加载的导入上。

我正在导入RoutingMoudule而不是仅导入模块

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { ElementsModule } from './pages/elements/elements.module';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: '',
        redirectTo: 'elements',
      },
      {
        path: 'elements',
        loadChildren: () => ElementsModule,
      }
    ],
  },
];

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

Answer 1

您的ElementsComponent是ElementsModule的一部分，因此，如果您想在ElementsComponent中使用ComponentsHomeModule，则需要以{{1}的形式导出ElementsComponent }，而不是ElementsModule。

懒惰模块Angular中的共享组件

1 个答案: