Question

在我决定进行延迟加载之前，我的应用程序运行良好：

所以，我的共享组件看起来像这样：

import { Component, Renderer2 } from '@angular/core';
export interface FormModel {
    captcha?: string;
  }

@Component({
  selector: 'app-layout',
  templateUrl: './app-layout.component.html',
    styleUrls: ['./app-layout.css']

})
export class FullLayoutComponent {

}

app-layout.component.ts

我正在我的另一个组件中使用此组件，例如：school-home.component.html：

<app-layout>
</app-layout>

并且运行良好，直到我创建了一个像这样的Module school-home.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SchoolhomeRoutingModule } from './school-home.routing.module';
import { SchoolHomeComponent } from './school-home.component';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [CommonModule, SchoolhomeRoutingModule, FormsModule, ModalModule ],
  declarations: [SchoolHomeComponent]
})
export class SchoolhomeModule {}

现在，我收到此错误：

app-layout' is not a known element:
1. If 'app-layout' is an Angular component, then verify that it is part of this module.
2. If 'app-layout' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-layout>

如果我尝试将此组件添加到学校家庭模块中：

发生这种情况：

Uncaught (in promise): Error: Type FullLayoutComponent is part of the declarations of 2 modules: AppModule and SchoolhomeModule! Please consider moving FullLayoutComponent to a higher module that imports AppModule and SchoolhomeModule. You can also create a new NgModule that exports and includes FullLayoutComponent then import that NgModule in AppModule and SchoolhomeModule.

我无法从错误中得知需要什么实现。请提出一些解决方法。

Answer 1

方法1 ：首先从SchoolhomeModule中删除FullLayoutComponent的声明。然后为app-layout组件创建一个模块文件，然后像这样导出您的组件。

exports: [ FullLayoutComponent ]

之后，将模块导入SchoolhomeModule导入部分。

在这种情况下，您需要导入模块而不是组件

方法2 ：您需要将FullLayoutComponent移到更高层次的模块中，该模块可以导入AppModule和SchoolhomeModule

这是因为您的两个组件都不在同一个模块下，所以您的SchoolhomeModule无法获得对FullLayoutComponent的引用

Answer 2

将包含FullLayoutComponent的模块导入SchoolhomeModule。

imports: [layoutModule]

然后在包含FullLayoutComponent的模块中，按 Gautam 所述添加导出。

exports: [ FullLayoutComponent]

“应用程序布局”不是一个已知元素：如何与不同模块共享组件

2 个答案: