angular7创建组件

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>