Question

我正在尝试将模式对话框中的内容传回给它的父级。但是，我收到了一个错误 - ＆gt; “错误错误：没有NgbActiveModal的提供商！”如何从模态对话框中返回内容？

app.ts

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FacultyComponent } from './faculty.component';
import { FacultyContent } from './faculty.modal';

@Component({
  selector: 'my-app',
  template: `
     <div class="container-fluid">

     <hr>
     <p>
     Trying to pass a value from the child modal dialog to the parent.
     </p>
     <hr>

     <faculty-list></faculty-list>
     </div>
     `})
export class App {    }   

@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, 
NgbModule.forRoot()], 
declarations: [App, FacultyComponent, FacultyContent],
entryComponents: [FacultyContent],
bootstrap: [App]
}) 
export class AppModule {}

faculty.component.ts

import { Component, Input } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { FacultyContent } from './faculty.modal';

@Component ({
    selector: 'faculty-list',
    styles: [`
          .app {
               display: block;
               text-align: center;
               padding: 25px;
               background: #f5f5f5;
          }
         `],
    template: `
            <div class="app">
            Parent: {{ myCount }}
              <counter
                [count]="myCount"
                (change)="countChange($event)">
              </counter>
            </div>

            <button class="btn btn-lg btn-outline-primary" 
            (click)="open()">Launch demo modal</button>
            `})

export class FacultyComponent {
    myCount: number = 10;

    countChange(event: any) {
      this.myCount = event;
    }

    constructor(private modalService: NgbModal) {}

    open() {      
        const modalRef = this.modalService.open(FacultyContent);
    }
}

faculty.modal.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'counter',
    styles: [`
          .counter {
          position: relative;
          }
          input {
          border: 0;
          border-radius: 3px;
          height: 30px;
          max-width: 100px;
          text-align: center;
          }
          button {
          outline: 0;
          cursor: pointer;
          height: 30px;
          border: 0;
          border-radius: 3px;
          background: #0088cc;
          color: #fff;
          }`],
    template: `<div class="modal-header">
         <h4 class="modal-title">Hi there!</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">
         <p>This is the child dialog with a increment/decrement counter.</p>
         <div class="counter">
         <button (click)="decrement()">
            Decrement
         </button>
         <input type="text" [value]="count">
         <button (click)="increment()">
            Increment
         </button>
         </div>
         </div>
         <div class="modal-footer">
         <button type="button" class="btn btn-outline-dark" 
         (click)="activeModal.close('Close click')">Close</button>
         </div>`})

export class FacultyContent {
@Input() count: number = 0;

@Output()
change: EventEmitter<number> = new EventEmitter<number>();

increment() {
  this.count++;
  this.change.emit(this.count);
}

decrement() {
  this.count--;
  this.change.emit(this.count);
}
constructor(public activeModal: NgbActiveModal) {}
}

我在这里创建了一个插件http://plnkr.co/edit/bh9jPCUqWpyHOIuiSNs6?p=info

从Angular中的模态对话框传回内容

0 个答案: