Angular多个module公用component组件

浏览: 81次 日期:2020年03月13日 23:46:11 作者:青格勒

为了加载的速度今天把很多个组件都进行了分组(懒加载)处理,然后发现了一个问题,以前公用的组件(富文本编辑器等)居然开始报错了,好尴尬。

然后开始逐步的去排查,下面直接写我的最终代码吧

第一步、创建公用组件的module

// ng g module components/editor --module=app.module

第二部、创建你的components

// ng g component components/editor

第三部、修改代码

// editor.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EditorComponent } from './Editor.component';

@NgModule({
  declarations: [EditorComponent],
  imports: [
    CommonModule
  ],
  // 注意这里-这里很关键有几个写几个就ok
  exports: [
    EditorComponent
  ],
})
export class EditorModule { }

// 其他的不用修改
// http://cenggel.com

第四步、引入module

//在app.module.ts或者你想使用的地方引入
import { EditorModule } from './components/editor/editor.module';
// 然后再imports里面弄进去EditorModule

第五步,开始使用

<app-editor></app-editor>

最后:注意下

如果想要分享多个组件的话可以生成一个share module,然后再里面分享多个component就可以了哦。

文章链接:http://cenggel.com/angular/167.html

版权声明:文章《Angular多个module公用component组件》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注