Question

我创建了一个名为AlertModal的组件，它应该覆盖模态窗口，如下所示：

模板：

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <ng-content></ng-content>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

控制器：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-alertmodal',
  templateUrl: './alertmodal.component.html',
  styleUrls: ['./alertmodal.component.css']
})
export class AlertmodalComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

我在模板中的另一个组件MyComponent中使用它：

<app-alertmodal #alert>this is a test</app-alertmodal>

并在MyComponent的控制器中：

@ViewChild('alert') alertWindow; 

constructor(private modalService: NgbModal) { /* some stuff */ }

open(this.alertWindow);  // This is run when I click a button

open(content) {
  this.modalService.open(content).result.then((result) => {
    this.closeResult = `Closed with: ${result}`;
  }, (reason) => {
    this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
  });
}

private getDismissReason(reason: any): string {
  if (reason === ModalDismissReasons.ESC) {
    return 'by pressing ESC';
  } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
    return 'by clicking on a backdrop';
  } else {
    return `with: ${reason}`;
  }
}

部分app.module：

@NgModule({
  declarations: [
    AppComponent,
    AlertmodalComponent,
    // And more of my components
  ],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    NgbModule.forRoot(),
    NgbDropdownModule.forRoot(),
    BrowserModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only
    )
  ],
  entryComponents: [AlertmodalComponent],
  providers: [GetInterfaceListService],
  bootstrap: [AppComponent]
})
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { AlertmodalComponent } from './shared/alerts/alertmodal/alertmodal.component';

问题是为什么我运行应该显示alertwindow的代码，它出错：

compiler.es5.js：1690未捕获错误：意外值＆＃39; NgbModal＆＃39;由模块＆＃39; AppModule＆＃39;导入。请添加@NgModule注释。

如果我从我的应用模块中删除导入，则会收到错误：

mycomponent.html：29错误错误：找不到[object Object]的组件工厂。你有没有把它添加到@ NgModule.entryComponents？

更新：

如果我注释掉

<app-alertmodal #alert>this is a test</app-alertmodal>

然后找到没有组件工厂＆＃39;错误消失，我的屏幕上出现灰色褪色的叠加层（但没有窗口）。

似乎有些东西只是错误连接/我误解了一些东西。我假设上面的行必须在我的视图中才能传递HTML内容＆＃39;这是一个测试＆＃39;到我的警报窗口。

从控制器打开模态窗口组件

0 个答案: