Question

我已经安装了模式弹出窗口

npm i angular-5-popup

并导入到我的module.ts文件中

import { ScModalModule } from './sc-modal/sc-modal.module';

Add ScModalModule in imports section in your root module. create new component;

并得到错误在这里，我更新了我的代码。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ScModalModule } from './sc-modal/sc-modal.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScModalModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

通过以下命令安装angular-5-popup

npm我angular-5弹出窗口

将以下SCModalModule导入添加到app.module.ts中

从“ angular-5-popup”导入{ScModalModule};

在app.module.ts中添加以下代码

@NgModule({
  declarations: [
    AppComponent,
    ExportToExcelComponent,
    FormDemoComponent,
    StackModalComponent
  ],
  imports: [
    BrowserModule,
    ScModalModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

在组件TS文件中添加以下代码

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalService, ModalComponent } from 'angular-5-popup';

@Component({
  selector: 'app-stack-modal',
  templateUrl: './stack-modal.component.html',
  styleUrls: ['./stack-modal.component.css']
})
export class StackModalComponent implements OnInit {
  @ViewChild("modal") modal: ModalComponent;
  constructor(
    private ms: ModalService
  ) { }

  openModal(id) {
    this.modal.openModal(id);
  }

  closeModal(id) {
    this.modal.closeModal(id);
  }

  ngOnInit() {
  }

}

在组件HTML文件中添加以下代码

<sc-modal id="modal-1" class="default" #modal>
  <div class="modal">
    <div class="modal-header">
      This my title
      <button class="sc-modal-close" (click)="closeModal('modal-1');"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i></button>
    </div>
    <div class="modal-body">
      <h1>A Custom Modal Name</h1>
      <p>
        Home page text: <input type="text" />
      </p>
    </div>
  </div>
  <div class="modal-background"></div>
</sc-modal>

<button (click)="openModal('modal-1')">Open Modal</button>

找不到模块'./sc-modal/sc-modal.module'

1 个答案: