Angular 角2模态误差

我试图在Angular 2中使用一个简单的模式，我可以在任何页面中使用它，而不需要添加HTML标记，因为我想保持我的.htmls干净。我在Angular JS中从引导中想到了类似于模态的东西，但我找不到类似的东西。 我试图使用，但我有以下错误：

MatchesComponent.html:37 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_0__angular_core__.E.create is not a function
    at DOMOverlayRenderer.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.DOMOverlayRenderer.render (http://localhost:4200/vendor.bundle.js:59597:87)
    at Overlay.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.Overlay.createOverlay (http://localhost:4200/vendor.bundle.js:59555:48)
    at http://localhost:4200/vendor.bundle.js:59537:47
    at Array.map (native)
    at Overlay.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.Overlay.open (http://localhost:4200/vendor.bundle.js:59537:14)
    at Modal$$1.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.Modal.open (http://localhost:4200/vendor.bundle.js:59670:53)
    at OneButtonPresetBuilder.webpackJsonp.../../../../ngx-modialog/bundle/ngx-modialog.es5.js.ModalOpenContextBuilder.open (http://localhost:4200/vendor.bundle.js:60002:30)
    at MatchesComponent.webpackJsonp.../../../../../src/app/components/matches/matches.component.ts.MatchesComponent.viewItemInfo (http://localhost:4200/main.bundle.js:801:14)
    at Object.eval [as handleEvent] (ng:///AppModule/MatchesComponent.ngfactory.js:61:27)

应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { ModalModule } from 'ngx-modialog';
import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';

import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { AlertsComponent } from './components/alerts/alerts.component';
import { MatchesComponent } from './components/matches/matches.component';
import { ProductsComponent } from './components/products/products.component';
import { ShipmentsComponent } from './components/shipments/shipments.component';
import { ComplaintsComponent } from './components/complaints/complaints.component';
import { UsersComponent} from './components/users/users.component';
import { StatisticsComponent } from './components/statistics/statistics.component';
import { BillingComponent } from './components/billing/billing.component';
import { NotificationsComponent } from './components/notifications/notifications.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';
import { AuthService } from './services/auth.service';

const appRoutes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full'},
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'alerts', component: AlertsComponent, canActivate: [AuthService] },
  { path: 'matches', component: MatchesComponent, canActivate: [AuthService] },
  { path: 'products', component: ProductsComponent, canActivate: [AuthService] },
  { path: 'shipments', component: ShipmentsComponent, canActivate: [AuthService] },
  { path: 'complaints', component: ComplaintsComponent, canActivate: [AuthService] },
  { path: 'users', component: UsersComponent, canActivate: [AuthService] },
  { path: 'statistics', component: StatisticsComponent, canActivate: [AuthService] },
  { path: 'billing', component: BillingComponent, canActivate: [AuthService] },
  { path: 'notifications', component: NotificationsComponent, canActivate: [AuthService] },
  { path: '**', component: PagenotfoundComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    AlertsComponent,
    MatchesComponent,
    ProductsComponent,
    ShipmentsComponent,
    ComplaintsComponent,
    UsersComponent,
    StatisticsComponent,
    BillingComponent,
    NotificationsComponent,
    PagenotfoundComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ModalModule,
    BootstrapModalModule,
    RouterModule.forRoot(
      appRoutes,
    )
  ],
  providers: [
    AuthService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

matches.component.ts

import { Component } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { AuthService } from '../../services/auth.service';
import { TableComponent } from '../alerts/alerts.component';
import { Modal } from 'ngx-modialog/plugins/bootstrap';

import * as _ from 'lodash';

export class ItemsResult {
  data: [Object];
  total: number;
}

@Component({
  selector: 'app-matches',
  templateUrl: './matches.component.html',
  styleUrls: ['./matches.component.less'],
  providers: [ ApiService , AuthService ]
})
export class MatchesComponent {

  tableHeaders: TableComponent[] = [
    { name: 'ID', attribute: '_id' },
    { name: 'Fecha de Expiración', attribute: 'expire_at' },
    { name: 'Item ID', attribute: 'item_id' },
    { name: 'Nombre Item', attribute: 'item_title'},
    { name: 'Order ID', attribute: 'order_id' },
    { name: 'Nombre Order', attribute: 'order_title' },
    { name: 'Stock', attribute: 'stock' },
    { name: 'Ver Order', attribute: '' }
  ];

  filterOptions: TableComponent[] = [
    { name: 'ID', attribute: '_id' },
    { name: 'Item ID', attribute: 'item_id' },
    { name: 'Nombre Item', attribute: 'item_title' },
    { name: 'Order ID', attribute: 'order_id' },
    { name: 'Nombre Order', attribute: 'order_title' }
  ];

  actualPage = 0;
  filteredList;
  total;
  sorted = false;
  filterType = this.filterOptions[0].attribute;
  filterValue = '';

  constructor( public apiService: ApiService, public auth: AuthService, public modal: Modal ) {
    this.updateMatches();
  }

  updateMatches(): void {
    this.apiService.getMatchesForPage(this.actualPage, '', this.filterType, this.filterValue).then((result: ItemsResult) => {
      console.log(result);
      this.total = result.total;
      this.filteredList = result.data;
    });
  }

  changePageUp(): void {
    const limit = this.total / 100;
    if (this.actualPage < limit) {
      this.actualPage++;
    }
    this.updateMatches();
  }

  changePageDown(): void {
    if (this.actualPage > 0) {
      this.actualPage--;
    }
    this.updateMatches();
  }

  sortBy(attribute: string): void {
    if (this.sorted) {
      this.filteredList = _.orderBy(this.filteredList, [attribute], ['asc']);
    } else {
      this.filteredList = _.orderBy(this.filteredList, [attribute], ['desc']);
    }
    this.sorted = !this.sorted;
  }

  viewItemInfo(itemId): void {
    this.modal.alert()
      .size('lg')
      .showClose(true)
      .title('A simple Alert style modal window')
      .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <li>Non blocking (click anywhere outside to dismiss)</li>
                <li>Size large</li>
                <li>Dismissed with default keyboard key (ESC)</li>
                <li>Close wth button click</li>
                <li>HTML content</li>
            </ul>`)
      .open();

  }

  viewOrderInfo(orderId): void {

  }

}

从'@angular/core'导入{Component}；
从“../../services/api.service”导入{ApiService}；
从“../../services/auth.service”导入{AuthService}；
从“../alerts/alerts.component”导入{TableComponent}；
从“ngx modialog/plugins/bootstrap”导入{Modal}；
从“lodash”导入*as uuu；
导出类ItemsResult{
数据：[对象]；
总数：个；
}
@组成部分({
选择器：“应用程序匹配”，
templateUrl:'./matches.component.html'，
styleUrls:['./matches.component.less']，
提供者：[ApiService，AuthService]
})
导出类匹配组件{
tableHeaders:TableComponent[]=[
{name:'ID'，属性：''u ID'}，
{name:'Fecha de Expiración'，属性：'expire_at'}，
{name:'Item ID'，attribute:'Item_ID'}，
{name:'Nombre Item'，属性：'Item_title'}，
{name:'Order ID'，attribute:'Order_ID'}，
{name:'Nombre Order'，属性：'Order_title'}，
{name:'Stock'，attribute:'Stock'}，
{name:'Ver Order'，属性：''}
];
过滤器选项：TableComponent[]=[
{name:'ID'，属性：''u ID'}，
{name:'Item ID'，attribute:'Item_ID'}，
{name:'Nombre Item'，属性：'Item_title'}，
{name:'Order ID'，attribute:'Order_ID'}，
{name:'Nombre Order'，属性：'Order_title'}
];
实际页面=0；
过滤列表；
全部的
排序=假；
filterType=this.filterOptions[0]。属性；
filterValue=''；
构造函数（公共apiService:apiService，公共auth:AuthService，公共模式：modal）{
this.updateMatches（）；
}
updateMatches（）：void{
this.apiService.getMatchesForPage（this.actualPage'，this.filterType，this.filterValue）。然后（（结果：ItemsResult）=>{
控制台日志（结果）；
this.total=result.total；
this.filteredList=result.data；
});
}
changePageUp（）：void{
常数限值=此总值/100；
如果（此.actualPage<限制）{
这个.actualPage++；
}
this.updateMatches（）；
}
changePageDown（）：void{
如果（this.actualPage>0）{
这是一个实际的页面--；
}
this.updateMatches（）；
}
排序方式（属性：字符串）：void{
if（this.sorted）{
this.filteredList=u.orderBy（this.filteredList[attribute]，'asc']）；
}否则{
this.filteredList=uu.orderBy（this.filteredList，[attribute]，'desc']）；
}
this.sorted=！this.sorted；
}
viewItemInfo（itemId）：无效{
this.modal.alert（）
.size（'lg'）
.showClose（正确）
.title（'简单警报样式模式窗口'）
.身体(`
Alert是一个经典的（标题/正文/页脚）1按钮模式窗口
不阻塞。
配置：

非阻塞（单击外部的任意位置以关闭）
大号
使用默认键盘键（ESC）解除
单击关闭按钮
HTML内容
`）
.open（）；
}
viewOrderInfo（orderId）：无效{
}
}

我猜这个错误不是由于模态模块造成的，但是我缺少一些依赖项，但是我不知道是哪一个，非常感谢您的帮助

---

关于，

在app.module中，在导入ModalModule时尝试调用.forRoot（） (按)

---

我今天也犯了同样的错误。我试图用一个组件实现一个自定义模式窗口。我用ngx modialog试过了，出现了错误。在使用旧版本（angular2 modal 3.0.2而不是ngx modialog）和typescript 2.3.4版对其进行测试后，错误消失

在与Modals进行了大量的斗争之后，我最终决定制作自己的modal，我认为它比我在那里发现的那些更好，因为它接收参数，并且可以在它的主体中包含任何HTML，我把它放在这里供有此问题的人使用。要求如下：

不要忘记在样式中包含bootstrap.min.css，在脚本中包含jquery.min.js

完成此操作后，应在app.module.ts中包含引导：

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
imports: [
    ...
    NgbModule.forRoot(),
    ...
  ]
...

然后您可以使用我创建的组件，如下所示：

import { Component } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { isUndefined } from 'util';

@Component({
  selector: 'app-custom-modal',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">{{title}}</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body" [innerHTML]="bodyHTML">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="successFunction()">{{okButtonText}}</button>
      <button type="button" class="btn btn-outline-dark" (click)="cancelFunction()">{{cancelButtonText}}</button>
    </div>
  `,
  styleUrls: ['./custom-modal.component.less']
})

export class CustomModalComponent {

  title;
  bodyHTML;
  okButtonText = 'Aceptar';
  cancelButtonText = 'Cerrar';
  successCallback;
  cancelCallback;

  constructor(public activeModal: NgbActiveModal) {}

  successFunction() {
    this.activeModal.close('Close click');
    if (!isUndefined(this.successCallback)) {
      this.successCallback();
    }
  }

  cancelFunction() {
    this.activeModal.close('Close click');
    if (!isUndefined(this.cancelCallback)) {
      this.cancelCallback();
    }
  }

}

从'@angular/core'导入{Component}；
从'@ng bootstrap/ng bootstrap'导入{NgbActiveModal}；
从“util”导入{isUndefined}；
@组成部分({
选择器：“应用程序自定义模式”，
模板：`
{{title}}
&时代；
{{okButtonText}}
{{cancelButtonText}
`,
样式URL:['./自定义模式.component.less']
})
导出类CustomModalComponent{
标题
bodyHTML；
okButtonText='Aceptar'；
cancelButtonText='Cerrar'；
成功回调；
取消回调；
构造函数（public-activeModal:NgbActiveModal）{}
successFunction（）{
this.activeModal.close（'close click'）；
如果（！isUndefined（this.successCallback））{
this.successCallback（）；
}
}
取消函数（）{
this.activeModal.close（'close click'）；
如果（！isUndefined（this.cancelCallback））{
这个.cancelCallback（）；
}
}
}

用法示例：

...
constructor( private modalService: NgbModal  ) {}
...
sendNotification() {
    //send notification...
    const modalRef = this.modalService.open(CustomModalComponent);
    modalRef.componentInstance.title = 'Notification Sent';
    modalRef.componentInstance.bodyHTML = '<p>Notification Succesfully sent.</p>';
  }

。。。
构造函数（私有modalService:NgbModal）{}
...
发送通知（）{
//发送通知。。。
const modalRef=this.modalService.open（CustomModalComponent）；
modalRef.componentInstance.title='Notification Sent'；
modalRef.componentInstance.bodyHTML='通知已成功发送。
；
}

这个模式是由我制作的，它可以工作并且完全可定制，您可以根据需要随意更改它。希望它能帮助别人

---

关于，

您能把您的部件代码显示在哪里吗

...
constructor( private modalService: NgbModal  ) {}
...
sendNotification() {
    //send notification...
    const modalRef = this.modalService.open(CustomModalComponent);
    modalRef.componentInstance.title = 'Notification Sent';
    modalRef.componentInstance.bodyHTML = '<p>Notification Succesfully sent.</p>';
  }