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

【问题标题】：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：添加了我的示例代码
你需要共享模块

标签： angular module components

【解决方案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]
})

【讨论】：