从一个模块到另一个模块的角度调用组件

Posted 2023-02-23

【中文标题】从一个模块到另一个模块的角度调用组件

【英文标题】：Angular call component from one module to another module

【发布时间】：2018-10-01 22:36:59

【问题描述】：

我有两个模块 gridusers 模块和 users 模块。grid 模块将列出数据表中的所有用户，当我单击操作项编辑时，它将打开一个弹出窗口来编辑用户。对于编辑用户，我正在尝试在用户模块中创建一个组件。当我尝试在 gridusers 模块中使用该编辑用户组件时，出现错误：

模板解析错误和未捕获（承诺）：错误：模板解析 错误：“app-edit-user”不是已知元素：

如果“app-edit-user”是一个 Angular 组件，则验证它是该模块的一部分。 如果“app-edit-user”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中 禁止显示此消息。

有什么帮助吗？

gridmodule
  -- gridmodule.ts
  -- gridcomponent.ts
  -- gridcomponent.html
  -- gridcomponent.scss

usermodule
  -- usermodule.ts
  -- usercomponent.ts
  -- usercomponent.html
  -- editusercomponent.ts
  -- editusercomponent.html
  -- usercomponent.scss
  -- editusercomponent.scss

editusercomponent.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-edit-user',
  templateUrl: './editusercomponent.html',
  styleUrls: ['./editusercomponent.scss']
)
export class editusercomponent
  title = 'edit user';

gridmodule.ts

@NgModule(
    declarations: [
        editusercomponent
    ],
    imports: [
        .-----
    ],
)

【问题讨论】：

请提供任何代码，我认为问题是你没有在你的模块中声明你的组件。

@AmayaSan：添加了我的示例代码

你需要共享模块

【参考方案1】：

使用@ngModule's 导出数组。 declarations 数组中定义的每个元素默认都是私有的。您应该只导出我们应用程序中执行其工作所需的任何其他模块。

usermodule.ts

import  CommonModule  from '@angular/common';
    @NgModule(
       imports:[CommonModule],
        declarations: [
            editusercomponent
        ],
       exports:[ editusercomponent]
    )

gridmodule.ts 在gridmodule的imports数组中注册用户模块

 import  UserModule  from '../user-module/user.module';
    @NgModule(
      imports: [
        BrowserModule,
       UserModule
      ],
      declarations: [],
      bootstrap: []
    )

【参考方案2】：

如果您希望其他模块使用您的组件，您必须将其导出到您的模块中

试试这个

@NgModule(
    declarations: [
        editusercomponent
    ],
    imports: [
        .-----
    ],
    exports: [editusercomponent]
)