Question

我正在使用angular 2和typescript创建一个CRUD ASP.NET Core应用程序。

在尝试实现弹出窗口之前，我有这个输出：

现在我试图插入＆＃34;插入或编辑学生详细信息＆＃34;弹出模式内的表，同时仍保持插入和编辑功能。我正在使用ng2-bootstrap-modal。

我创建了一个modify.component.ts并在app.module.ts中导入了ModifyComponent组件

＆＃13;

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
export interface ModifyModel {
  title:string;
  message:string;
}
@Component({  
    selector: 'modify',
    template: `<div class="modal-dialog">
                <div class="modal-content">
                   <div class="modal-header">
                     <button type="button" class="close" (click)="close()" >&times;</button>
                     <h4 class="modal-title">{{title || 'Confirm'}}</h4>
  <!-- Here's the insert or edit table code --> 
                    <div class="modal-footer">
                     <button type="button" class="btn btn-primary" (click)="modify()">OK</button>
                     <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
                   </div>
                 </div>
              </div>`
})
export class ModifyComponent extends DialogComponent<ModifyModel, boolean> implements ModifyModel {
  title: string;
  message: string;
  constructor(dialogService: DialogService) {
    super(dialogService);
  }
  modify() {
    // we set dialog result as true on click on confirm button, 
    // then we can get dialog result from caller code 
    this.result = true;
    this.close();
  }
}

＆＃13;

然后我将ModifyComponent导入到students.component.ts，我想在其中使用它。

这还包含从我的数据库插入/编辑数据的所有代码。这是迄今为止的代码：

＆＃13;

import {
    Component, Input, trigger,
    state,
    style,
    transition,
    animate,
    keyframes
} from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { ModifyComponent } from '../students/modify.component';
import { DialogService } from "ng2-bootstrap-modal";
import { FormsModule } from '@angular/forms';


@Component({
    selector: 'students',
    template: require('./students.component.html')
})

export class studentsComponent {
    // to get the Student Details  
    public student: StudentMasters[] = [];
    // To stored Student Informations for insert/Update and Delete  
    public StdIDs = "0";
    public StdNames = "";
    public Emails = "";
    public Phones = "";
    public Addresss = "";

    //To display Edit and Delete Images  
    public imgEdit = require("./Images/edit.gif");
    public imgDelete = require("./Images/delete.gif");

    constructor(public http: Http) {
        this.getData();
    }

    //to get all the Student data from Web API  
    getData() {
        this.http.get('/api/StudentMastersAPI/Student').subscribe(result => {
            this.student = result.json();
        });
    }


    // to show form to add new Student Information  
    AddStudent() {
        this.StdIDs = "0";
        this.StdNames = "";
        this.Emails = "";
        this.Phones = "";
        this.Addresss = "";
    }

    // to show form to edit Student Information  
    editStudentsDetails(StdID, StdName, Email, Phone, Address) {
        this.StdIDs = StdID;
        this.StdNames = StdName;
        this.Emails = Email;
        this.Phones = Phone;
        this.Addresss = Address;
    }

    // If the studentid is 0 then insert the student infromation using post and if the student id is more than 0 then edit using put mehod  
    addStudentsDetails(StdID, StdName, Email, Phone, Address) {
        alert(StdName);
        var headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        if (StdID == 0) {
            this.http.post('api/StudentMastersAPI', JSON.stringify({ StdID: StdID, StdName: StdName, Email: Email, Phone: Phone, Address: Address }), { headers: headers }).subscribe();
            alert("Student Detail Inserted");
        }
        else {
            this.http.put('api/StudentMastersAPI/' + StdID, JSON.stringify({ StdID: StdID, StdName: StdName, Email: Email, Phone: Phone, Address: Address }), { headers: headers }).subscribe();
            alert("Student Detail Updated");
        }
        this.getData();
    }

    //to Delete the selected student detail from database  
    deleteStudentsDetails(StdID) {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json; charset=utf-8');
        this.http.delete('api/StudentMastersAPI/' + StdID, { headers: headers }).subscribe();
        alert("Student Detail Deleted");
        this.getData();
    }

    closeEdits() {
        this.StdIDs = "0";
        this.StdNames = "";
        this.Emails = "";
        this.Phones = "";
        this.Addresss = "";
    }


}

export interface StudentMasters {
    stdID: number;
    stdName: string;
    email: string;
    phone: string;
    address: string;
}

＆＃13;

我将按钮代码放在我的students.component.html中。

现在我唯一缺少的是在students.component.ts中导出构造函数DialogService。

＆＃13;

        constructor(private dialogService:DialogService) {}
        showModify() {
            let disposable = this.dialogService.addDialog(ModifyComponent, {
                title:'Confirm title', 
                message:'Confirm message'})
                .subscribe((isConfirmed)=>{
                    //We get dialog result
                    if(isConfirmed) {
                        alert('accepted');
                    }
                    else {
                        alert('declined');
                    }
                });
            setTimeout(()=>{
                disposable.unsubscribe();
            },10000);
        }
    }

＆＃13;

我试过把它放在＆＃34;出口类学生成员{＆＃34;但我得到一个错误，我不允许使用多个构造函数（我已经使用构造函数（公共http：Http）从我的数据库中获取数据）。

我在哪里导出DialogService构造函数？ 我是否需要单独导出？

如果需要，我会尽快提供更多信息。

Answer 1

您必须将它设为@Injectable并放入app.module.ts中的providers部分。请参阅此文https://long2know.com/2017/01/angular2-dialogservice-exploring-bootstrap-part-2/

Answer 2

您不应手动创建服务，因为这会破坏Angular2所依赖的依赖注入的概念。

您需要将您的服务添加到@NgModule类中的prividers声明（如果您希望在应用程序中使用单个服务实例）或providers类studentsComponent声明中如果你想拥有每个组件的实例。 Angular2将为您做的所有其他工作。

@NgModule({
  providers: [
     DialogService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 3

我通过在第一个构造函数的括号中添加它来解决它。

    constructor(public http: Http, private dialogService: DialogService) {
    this.getData();   }

将showModify（）代码放在studentComponent中。

实现弹出模式 - 在哪里导出构造函数DialogService

3 个答案: