Angular2 Tapuscrit D'Alerte Personnalisées
Je suis totalement nouveau pour Angular2, Et je suis coincé sur la façon de créer une alerte personnalisées comme ceci:
cochez cette boîte d'alerte ici
Depuis que je suis de nouveau à Angular2 concepts , je ne sais pas comment utiliser ce code dans mon angular2 application dans laquelle j'ai fait un tableau avec le bouton soumettre. Je veux créer une alerte sur le bouton "soumettre".
Ici est l'INTERFACE utilisateur :
Voici ma table.composante.ts:
import {Component, NgModule } from "@angular/core";
import { BrowserModule } from '@angular/platform-browser';
import {Http} from "@angular/http";
@Component({
selector: 'demo',
templateUrl: './app/table/table.component.html'
})
export class TableComponent{
public data;
constructor(private http: Http) {
}
ngOnInit(): void {
this.http.get("app/table/data.json")
.subscribe((data) => {
setTimeout(() => {
this.data = data.json();
}, 1000);
});
}
addRow()
{
this.data.push({
status:''
})
}
deleteRow(index) {
this.data.splice(index,1);
}
public toInt(num: string) {
return +num;
}
public sortByWordLength = (a: any) => {
return a.city.length;
}
}
Voici ma table.le module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";
import { DataTableModule } from "angular2-datatable";
import { HttpModule } from "@angular/http";
import { TableComponent } from './table.component';
import { DataFilterPipe } from './table-filter.pipe';
@NgModule({
imports: [
CommonModule,
DataTableModule,
FormsModule,
HttpModule
],
declarations: [TableComponent, DataFilterPipe],
exports: [TableComponent]
})
export class TableModule { }
Voici mon application.le module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TableModule } from './table/table.module';
@NgModule({
imports: [BrowserModule, TableModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
J'ai essayé de mettre en œuvre cette code dans mon application ci-dessus, mais c'était la pagaille.
Merci de Toute aide est appréciée,
Merci d'avance
- Le
angular2-modal
référentiel a un guide de mise en route, vous devriez essayer de suite. - Jetez un oeil à cette réponse simple et stackoverflow.com/questions/42460418/... Remarque: Lire l'explication clairement
Vous devez vous connecter pour publier un commentaire.
NG2-BOOTSTRAP est possible ce que vous cherchez.
Démo ici: https://valor-software.com/ng2-bootstrap/#/modals
Selon le style que vous utilisez et si vous êtes prêt à accepter le code bêta, vous pouvez utiliser l'angle de dialogue matériau
https://material.angular.io/components/component/dialog
Il ya quelques façons de le faire, vous pouvez soit suivre ce qui a été recommandé par d'autres utilisateurs d'utiliser Bootstrap ou de Matériel pour créer une alerte, vous êtes à la recherche pour.
Il y a une autre réponse dans stackoverflow qui vous propose d'utiliser un service de déclencher un modal.
JS:
HTML:
JS:
JS:
J'ai importé service d'alerte uniquement dans le module, ce qui permet différentes pages de travailler avec une variable centrale dans ce cas, il sera AlertService l'objet alerte.
Je crois qu'il existe une autre manière, en l'injectant directement dans le DOM. Pour cela, vous aurez à lire de Valor bootstrap bibliothèque de comprendre ce qu'ils ont fait pour l'injecter dans les DOM directement(je ne sais pas trop si il injecte dans les DOM.
Espérons que cette aide!