要在Angular中创建自定义模态服务,可以按照以下步骤操作:
modal.service.ts的新服务文件,其中包含以下代码:import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Injectable({
  providedIn: 'root'
})
export class ModalService {
  constructor(private modalService: NgbModal) { }
  open(content) {
    this.modalService.open(content);
  }
}
app.module.ts中导入NgbModalModule:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
ModalService:import { Component } from '@angular/core';
import { ModalService } from './modal.service';
@Component({
  selector: 'app-root',
  template: `
    
    
      
        Modal Header
        
      
      
        Modal Content
      
      
     
  `,
})
export class AppComponent {
  constructor(private modalService: ModalService) { }
  openModal() {
    this.modalService.open(this.modalContent);
  }
}
openModal()方法来触发模态框的打开。注意:上述代码示例使用了ng-bootstrap库来实现模态框,所以需要先安装和导入相应的模块。确保已经在项目中安装了ng-bootstrap库,并在angular.json文件中添加了相应的样式和脚本。
这样就实现了一个简单的自定义模态服务。当点击打开按钮时,模态框将会显示。