1.两条重要ng命令
ng generate module bootstrap-modal // 创建ng的module模板
ng generate component bootstrap-modal // 创建ng的组件模板
2.配置exports
当其他组件想要调用这个新建的组件时,这个组件的module文件需要配置exports
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BootstrapModalComponent } from './bootstrap-modal.component';
@NgModule({
declarations: [BootstrapModalComponent],
imports: [
CommonModule
],
exports: [BootstrapModalComponent], // 这里是新增的代码段
})
export class BootstrapModalModule { }
3.父组件也需要配置相应的imports代码段
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { MainComponent } from './main-layout/main.component';
import { RouterModule } from '@angular/router';
import {SidebarComponent} from './sidebar/sidebar.component';
import {HeaderComponent} from './header/header.component';
import {NavigationModule} from '../navigation/navigation.module';
import {LoginLayoutComponent} from './login-layout/login-layout.component';
import {BootstrapModalModule} from '../components/bootstrap-modal/bootstrap-modal.module'; // 新增代码
export const COMPONENTS = [MainComponent, LoginLayoutComponent, SidebarComponent, HeaderComponent];
@NgModule({
declarations: [...COMPONENTS],
imports: [
CommonModule,
RouterModule,
BsDropdownModule,
ModalModule,
ButtonsModule,
NavigationModule,
BootstrapModalModule // 新增代码段
],
exports: [...COMPONENTS],
entryComponents: []
})
export class LayoutModule { }
4.在父组件调用
<app-bootstrap-modal></app-bootstrap-modal>