Angular2 Typescript 自定义警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42538027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 Typescript Customized Alert
提问by
I am totally new to Angular2, And I am stuck on how to create an customized alert like this: check this alert box here
我是 Angular2 的新手，我被困在如何创建这样的自定义警报： 在此处选中此警报框
Since I am new to Angular2 concepts , I dont know how to use this code in my angular2 app in which I made a table with submit button. I want to create an alert on submit button.
由于我是 Angular2 概念的新手，我不知道如何在我的 angular2 应用程序中使用此代码，我在其中创建了一个带有提交按钮的表格。我想在提交按钮上创建警报。
Here is the UI :
这是用户界面：
Here's my table.component.ts:
这是我的 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;
}
}
Here's my table.module.ts:
这是我的 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 { }
Here's my app.module.ts:
这是我的 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 { }
I tried to implement this codein my above app, but it was mess. Please Any help is appreciated, Thanks in advance
我试图在我上面的应用程序中实现这段代码，但它很混乱。请任何帮助表示赞赏，提前致谢
回答by DOMZE
NG2-BOOTSTRAPis possible what you are looking for.
NG2-BOOTSTRAP 可以满足您的需求。
Demo here: https://valor-software.com/ng2-bootstrap/#/modals
回答by John East
Depending on the styling you are using and whether you're willing to accept beta code, you could use the angular material dialog
根据您使用的样式以及您是否愿意接受测试版代码，您可以使用 angular material 对话框
回答by gyeong
There are a few ways to do it, you can either follow what was recommended by other users to use Bootstrap or Material to create that alert you are looking for.
有几种方法可以做到这一点，您可以按照其他用户的建议使用 Bootstrap 或 Material 创建您正在寻找的警报。
There is another similar answer in stackoverflow that suggests you to use a service to trigger a modal.
stackoverflow 中有另一个类似的答案，建议您使用服务来触发模态。
- Create a service to control the visibility of your alert.
- 创建服务来控制警报的可见性。
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;
}
}- Add alert to your app's root, this is to make sure we can use them anywhere in the app.
- 将警报添加到您的应用程序的根目录，这是为了确保我们可以在应用程序的任何位置使用它们。
<!-- 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>- Make sure you've imported the AlertService into the view you want to activate
- 确保您已将 AlertService 导入要激活的视图中
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;
}
}- Lastly, don't forget to import into your module.
- 最后，不要忘记导入到您的模块中。
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 { }I've imported alert service only in the module, this allows different pages to be working with one central variable in this case it will be AlertService's alert object.
我只在模块中导入了警报服务，这允许不同的页面使用一个中心变量，在这种情况下它将是 AlertService 的警报对象。
I believe there is another way by injecting it directly into the DOM. For that you will have to read Valor's bootstrap library to understand what did they do to inject it into the DOM directly(I'm not too sure if they actually injects it into the DOM.
我相信还有另一种方法将它直接注入到 DOM 中。为此，您必须阅读 Valor 的引导程序库以了解他们如何将其直接注入到 DOM 中（我不太确定他们是否真的将其注入到 DOM 中。
Hope this helps!
希望这可以帮助！
