Question

我在渲染自定义组件时遇到问题。即使我把我的共享模块放在NgModule中它也不会渲染。我得到一个错误，它说我应该向NgModule添加组件或添加参数CUSTOM_ELEMENTS_SCHEMA的属性模式。正如我所说，我将组件添加到共享模块和共享模块到我想要使用它的组件。然后我尝试了CUSTOM_ELEMENTS_SCHEMA，我摆脱了错误，但它没有呈现＆＃34; custom＆＃34;组件它只是渲染标签od comp。

自定义组件模块

checkbox.module.ts

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { CheckboxComponent } from './checkbox.component';

@NgModule({
    imports: [FormsModule],
    exports: [CheckboxComponent],
    declarations: [CheckboxComponent]
})
export class CheckboxModule { }

共享模块

shared.module.ts

编辑：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckboxModule, CheckboxComponent } from '../components/checkbox';
@NgModule({
    imports: [
        CommonModule,
        CheckboxModule
    ],
    declarations: [],
    exports: [ CheckboxComponent ]
})
export class SharedModule { }

我尝试使用共享模块和自定义组件标记的模块：

dashboard.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { SharedModule } from '../shared/shared.module';
@NgModule({
    imports: [
        SharedModule,
        CommonModule
    ],
   declarations: [DashboardComponent]
})

export class DashboardModule { }

它呈现的内容类似于没有内容的标记

<app-checkbox _ngcontent-c1 name="sth"></app-checkbox>

Answer 1

您在两个模块中声明CheckboxComponent。它应该足以在共享模块中声明它

Answer 2

您已经多次声明了相同的组件。根据您的用例，每个组件应该只在一个模块中声明。可以想象它与声明变量的方式相同 - 您只需执行一次，然后就可以开始使用它了。如果一个组件是从同一个模块声明和导出的，那么该组件也可以在下游使用，而不仅仅是声明它的模块。

由于您已经从FormsModule声明了CheckboxComponent，因此您不需要再次声明或导出它。话虽这么说，如果有意义的话，您可能需要考虑导出整个模块：

import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import { CheckboxComponent } from './checkbox.component';

@NgModule({
    imports: [FormsModule],
    exports: [FormsModule]
})
export class CheckboxModule { }

Answer 3

我发现了问题所在。在app.module.ts中，我必须导入dashboard.module.ts模块，而不是声明dashboard.component.ts componnent。我想如果可能的话，一切都应该通过模块完成：）

我希望这有助于某人。

即使我把它放在NgModule

3 个答案: