0
私は角2とtypescriptを持つCRUD ASP.NET Coreアプリケーションを作成しています。 
ポップアップモーダルの実装 - コンストラクタをエクスポートする場所DialogService
まだ挿入と編集機能を維持しながら、今、私はポップアップモーダル内の「挿入または編集学生の詳細」テーブルを置くしようとしている：私はこの出力を持っていたポップアップを実装しようとする前に
。 私はng2-bootstrap-modalを使用しています。
私はmodify.component.tsを作って、私はその後、students.component.tsにModifyComponentをインポート
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()" >×</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();
}
}私app.module.tsにModifyComponent部品を輸入しどこでそれを使用したいのですか？
これには、データベースからデータを挿入/編集するためのすべてのコードも含まれています。ここでのコードは、これまでのところです：
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;
}私は私のstudents.component.htmlにボタンのコードを置きます。
私が欠けているのは、students.component.tsのコンストラクタDialogServiceをエクスポートすることだけです。
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);
}
}私は「輸出クラスstudentsComponent {」が、私は（私はすでにコンストラクタ（パブリックHTTPを使用しています私は複数のコンストラクタを使用することはできませんよエラーが出るの下にこれを入れてみました： Http）私のデータベースからデータを取得する）。
ここで、DialogServiceコンストラクタをエクスポートしますか？ エクスポートを別に行う必要はありますか？
必要に応じて、できるだけ早く詳細を提供します。
あなたのリンクから実装しようとしました。投稿の下部にある追加部分をご覧ください。 – ire
ダイアログサービスの代わりにDialogComponentをエクスポートしました。このリンクには、DialogServiceのカスタム実装があります。 DialogServiceではなく@Injectableとしてエクスポートしたため、app.module DialogComponentでインポートするか、代わりにDialogServiceを使用するかのいずれかです。 DialogServiceをどこにも実装していない場合は、modalService：NgbModalをコンポーネント内で直接使用する必要があります。 –