将模块放入组件中，角度

Posted 2023-02-19

【中文标题】将模块放入组件中，角度

【英文标题】：Put module into component, angular

【发布时间】：2021-06-01 11:02:48

【问题描述】：

我需要将 mdbModal 放入组件中，但该组件没有 module.ts 存档，当尝试这个动作时，我得到：

ERROR Error: Uncaught (in promise): Error: Export of name 'mdbModal' not found!
Error: Export of name 'mdbModal' not found!

我的集体项目中没有示例，可以在组件中导入模块的方法是什么？

我对角度比较陌生。

<div
  mdbModal
  #basicModal="mdbModal"
  class="modal right modal-scroll"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myBasicModalLabel"
  aria-hidden="true"
  >
  ...
</div>

这是我的父模块

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import 
  ModalModule,
  WavesModule,
  InputsModule,
  ButtonsModule,
  CheckboxModule,
 from 'angular-bootstrap-md';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import  SharedModule  from '../shared/shared.module';
import  NgxPaginationModule  from 'ngx-pagination';

import  PrimeDetailRoutingModule  from './prime-detail-routing.module';
import  PrimeDetailComponent  from './prime-detail.component';


@NgModule(
  declarations: [PrimeDetailComponent],
  imports: [
    CommonModule,
    PrimeDetailRoutingModule,
    SharedModule,
    NgxPaginationModule,
    ModalModule,
    WavesModule,
    InputsModule,
    ButtonsModule,
    CheckboxModule,
    FormsModule,
  ]
)
export class PrimeDetailModule  

如果我在父模块中导入 mdbModal 没有问题，但是如果我需要在没有 module.ts 的情况下将其放入组件中

【问题讨论】：

您能分享一下您如何尝试将 mdbModal 导入您的项目的代码吗？

我们可以在声明组件的模块中导入需要的模块。

@WangLiang 我应该把 html 标签放到组件或父模块的哪里？？

@Keimeno 我举了一个例子，在尝试将html标签放入父模块后，它是一样的

【参考方案1】：

prime.module.ts：

import 
  ModalModule,
  WavesModule,
  InputsModule,
  ButtonsModule,
  CheckboxModule,
 from 'angular-bootstrap-md';
…
@NgModule (
  ...
  imports: [ModalModule.forRoot(),],
  ...
)

https://mdbootstrap.com/docs/b5/angular/pro/installation/

【讨论】：

我需要在组件文件夹中创建一个 module.ts 文件吗？有可能吗？？

不，不需要新建模块文件

好的，我尽快试试

【参考方案2】：

我的解决方案是，如果组件位于 Module Father 内部，则可以将 Component 与 Module 放在一起，例如：

应用程序 我的网站 组件 my-site.component.ts my-site.module.ts 等

你可以把新组件放在这个目录下

ng generate component MySite/components/first-component --module app/MySite

之后，在父module.ts中你会看到如下内容：

import  FirstComponentComponent  from './components/first-component/first-component.component';

@NgModule(
  declarations: [FirstComponentComponent],
)