警报 + Angular

Question

我有一个角度应用程序，我试图在后端执行插入方法。我需要在后端响应后显示一个警报，例如 SweetAlert 中的一个。但我不知道有任何组件可以做到这一点。 SweetAlert 在单击按钮时工作，而不是后端的响应。

例如：

我真正的问题是：

如何在打字稿中启用 SweetAlert

有人可以帮我吗？

Answer 1

发出 http 请求并在您想要的组件中订阅它，当 http 请求成功时，您会收到响应 - 显示警报。

service.ts

import { Injectable } from '@angular/core';
    import { HttpClient, Response, RequestOptions, Headers } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/observable/throw';

        export class CcDataServiceService {
     constructor(private http: HttpClient) {  <-- httpclient for angular6
      }

          getData(): Observable<any[]> {
            return this.http.get('https://')
              .map(this.extractData)
              .catch(this.handleError);
          }


          private extractData(res: Response) {
            const body = res.json();
            return body || [];
          }

          private handleError(error: any) {
            const errMsg = (error.message) ? error.message :
              error.status ? `${error.status} - ${error.statusText}` : 'Server error';
            console.error(errMsg);
            console.log('Server Error!');
            return Observable.throw(errMsg);
          }
        }

component.ts

import swal from 'sweetalert'
    constructor(public jsonDataService: CcDataServiceService) {
      }

      ngOnInit() {
        let thisx = this;

            this.jsonDataService.getData().subscribe(
              function (success) {
                // alert here on success
                 swal("Hello world!");
              },
              error => console.log('Getting Server Data Error :: ' + 
             JSON.stringify(error)));


    }

Link:- https://stackblitz.com/edit/angular6-7scyt7?file=app/app.component.ts

警报 + Angular

Alert + Angular

javascript

alert

typescript

angular

service.ts

component.ts