Question

我对Angular2完全不熟悉，而且我仍然坚持如何创建这样的自定义警报： check this alert box here

由于我是Angular2概念的新手，我不知道如何在我的angular2应用程序中使用此代码，我在其中使用提交按钮创建了一个表。我想在提交按钮上创建一个提醒。

以下是用户界面：

这是我的table.component.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;
    }
}

这是我的table.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 { }

这是我的app.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 { }

我尝试在上面的应用中实现这个code，但它很乱。请任何帮助表示赞赏，提前致谢

Answer 1

NG2-BOOTSTRAP可能是你想要的。

在这里演示：https://valor-software.com/ng2-bootstrap/#/modals

Answer 2

根据您使用的样式以及您是否愿意接受测试版代码，您可以使用角度材质对话框

https://material.angular.io/components/component/dialog

Answer 3

有几种方法可以执行此操作，您可以按照其他用户的建议使用Bootstrap或Material来创建您要查找的警报。

stackoverflow中还有另一个类似的答案，建议您使用服务来触发模态。

创建服务以控制警报的可见性。

＆＃13;

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;
  }

}

＆＃13;

向应用的根添加提醒，这是为了确保我们可以在应用的任何位置使用它们。

＆＃13;

<!-- 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>

＆＃13;

确保您已将AlertService导入要激活的视图

＆＃13;

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;
    }
}

＆＃13;

最后，不要忘记导入您的模块。

＆＃13;

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 { }

＆＃13;

我只在模块中导入了警报服务，这允许不同的页面使用一个中心变量，在这种情况下它将是AlertService的警报对象。

我相信将其直接注入DOM还有另一种方法。为此，您必须阅读Valor的引导程序库，以了解它们是如何直接将它注入DOM中的（我不太确定它们是否真的将它注入DOM中。

希望这有帮助！

Angular2 Typescript自定义警报

3 个答案: