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

InformationsquelleAutor | 2017-03-01

0

NG2-BOOTSTRAP est possible ce que vous cherchez.

Démo ici: https://valor-software.com/ng2-bootstrap/#/modals

InformationsquelleAutor DOMZE
0

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

InformationsquelleAutor John East

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.

Créer un service de contrôle de la visibilité de votre alerte.

JS:

import { Injectable } from '@angular/core';

@Injectable()
export class AlertService {

  alert = { 
    isVisible : false,
    message : ''
  };

  constructor() { }

  show(message){
    console.log('is visible');
    this.alert.isVisible = true;
  }

  hide(){
    this.alert.isVisible = false;
  }

}

Ajouter une alerte de votre application est à la racine, c'est de nous assurer de pouvoir les utiliser n'importe où dans l'application.

HTML:

<!-- simulated html -->
<header class='header'>Hello World</header>
<main> lorem ipsum </main>
<footer>The bottom of the world</footer>

<!-- alert dialog -->
<app-alert *ngIf="alert.isVisible"></app-alert>

Assurez-vous que vous avez importé la AlertService dans la vue que vous souhaitez activer

JS:

import { Component } from '@angular/core';
import { AlertService } from '../alert.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

    private alertDialog;

    constructor(
      private alertSvc:AlertService
    ){
      this.alertDialog = this.alertSvc.alert;
    }
}

Enfin, n'oubliez pas de les importer dans votre module.

JS:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AlertService } from './alert.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [AlertService],
  bootstrap: [AppComponent]
})
export class AppModule { }

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!

InformationsquelleAutor gyeong

Vous devez vous connecter pour publier un commentaire.