ngx-bootstrap使用03 Alerts组件、利用Object.assign复制对象

1 Alerts

　　该组件用于给用户操作提供反馈信息或者提供一些警告信息

2 用法

　　2.1 下载ngx-bootstrap依赖

　　　　参考博文：点击前往

　　2.2 在模块级别导入AlertModule模块

　　　　技巧01：由于AlertModule是一个工具组件，在实际开发中一般都是在共享模块进行导入的

　　　　

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;

import { AppComponent } from ‘./app.component‘;
import { TestComponent } from ‘./test/test.component‘;
import {FormsModule, ReactiveFormsModule} from ‘@angular/forms‘;

import {
  AccordionModule,
  AlertModule
} from ‘ngx-bootstrap‘;

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AccordionModule.forRoot(),
    AlertModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　2.3 在需要用Alerts组件的地方直接使用alert选择器即可

    <alert type="success">
      hello boy
    </alert>

　　2.4 效果展示

　　　　

3 实例讲解

　　3.1 基本使用结构

　　　　Alert组件可以包含任意长度的文本内容，还可以包含一个按钮来控制alert组件的隐藏；alert组件通过制定type属性的值来设置样式，type属性的值只能是success、info、warning、danger中的一个

　　　　3.1.1 alert组件样式

　　　　　　可以利用alert-*来给alert组件内的其他元素制定样式，aler-*样式列表如下

　　　　　　　　

　　　　3.1.2 alert组件基本结构

    <alert type="类型名称">
      内容
    </alert>

　　

<div class="panel panel-primary">
  <div class="panel-heading">alerts组件基本结构</div>
  <div class="panel-body">
    <alert type="success">
      <strong>success&nbsp;</strong>
      <span>使用了success样式的alert组件</span>
    </alert>
    <alert type="info">
      <strong>info&nbsp;</strong>
      <span>使用了info样式的alert组件</span>
    </alert>
    <alert type="warning">
      <strong>warning&nbsp;</strong>
      <span>使用了warning样式的alert组件</span>
    </alert>
    <alert type="danger">
      <strong>danger&nbsp;</strong>
      <span>使用了danger样式的alert组件</span>
    </alert>
  </div>
  <div class="panel-footer">2018-1-7 16:53:48</div>
</div>

HTML

import { Component, OnInit } from ‘@angular/core‘;

@Component({
  selector: ‘app-test‘,
  templateUrl: ‘./test.component.html‘,
  styleUrls: [‘./test.component.scss‘]
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

TS

　　3.2 自动匹配颜色

　　　　为alert组件内部的其它元素添加alert-link类去自动根据alert组件的类型进行颜色匹配

　　　　技巧01：如果alert组件内部的元素不指定alert-link类，会自动进行颜色匹配

　　　　技巧02：如果alert组件内部的其他元素制定了alert-link类，不仅会进行颜色自动匹配还会进行加粗设置

　

<div class="panel panel-primary">
  <div class="panel-heading">alerts组件基本结构</div>
  <div class="panel-body">
    <alert type="success">
      <strong class="alert-link">success&nbsp;</strong>
      <span>使用了success样式的alert组件</span>
      <a class="alert-link" href="https://valor-software.com/ngx-bootstrap/#/alerts">alert组件官方文档</a>
    </alert>
    <alert type="info">
      <strong>info&nbsp;</strong>
      <span>使用了info样式的alert组件</span>
      <a class="alert-link" href="https://valor-software.com/ngx-bootstrap/#/alerts">alert组件官方文档</a>
    </alert>
    <alert type="warning">
      <strong>warning&nbsp;</strong>
      <span>使用了warning样式的alert组件</span>
      <a class="alert-link" href="https://valor-software.com/ngx-bootstrap/#/alerts">alert组件官方文档</a>
    </alert>
    <alert type="danger">
      <strong>danger&nbsp;</strong>
      <span>使用了danger样式的alert组件</span>
      <a class="alert-link" href="https://valor-software.com/ngx-bootstrap/#/alerts">alert组件官方文档</a>
    </alert>
  </div>
  <div class="panel-footer">2018-1-7 16:53:48</div>
</div>

HTML

import { Component, OnInit } from ‘@angular/core‘;

@Component({
  selector: ‘app-test‘,
  templateUrl: ‘./test.component.html‘,
  styleUrls: [‘./test.component.scss‘]
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

TS

　　3.3 包含其它元素

　　　　alert元素可以包含其它的HTML元素

　　　

<div class="panel panel-primary">
  <div class="panel-heading">alert包含其他HTML元素</div>
  <div class="panel-body">
    <alert type="success">
      <h2>包含其它元素</h2>
      <div>我是div元素</div>
    </alert>
  </div>
  <div class="panel-footer">2018-1-7 20:48:28</div>
</div>

HTML

import { Component, OnInit } from ‘@angular/core‘;

@Component({
  selector: ‘app-test‘,
  templateUrl: ‘./test.component.html‘,
  styleUrls: [‘./test.component.scss‘]
})
export class TestComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

TS

　　3.4 输入属性dismissible

　　　　当alert组件的dismissible属性值为真时就会出现一个关闭按钮，点击就可以关闭alert组件

　　　　技巧01：在typescript中利用Object.assign实现对象的复制

　　　　　　参考博文：点击前往

　　　

<div class="panel panel-primary">
  <div class="panel-heading">输入属性diamissible</div>
  <div class="panel-body">
    <alert type="success" dismissible="true">
      <span class="alert-link">Dismissible</span>
      <span>当alert组件的dismissible属性值为真时就会出现一个关闭按钮，点击就可以关闭ale rt组件</span>
    </alert>

    <button class="btn-primary" (click)="onDismissible()">dismissible功能切换</button>
    <span *ngIf="dismissible">dismissible功能开启<button class="btn-info" (click)="onReset()">Reset</button></span>
    <span *ngIf="!dismissible">dismissible功能关闭</span>
    <alert *ngFor="let alert of alerts;" [dismissible]="dismissible">
      <span class="alert-link">{{alert.title}}</span>
      <span>{{alert.content}}</span>
    </alert>
  </div>
  <div class="panel-footer">2018-1-7 20:55:33</div>
</div>

HTML

import { Component, OnInit } from ‘@angular/core‘;

@Component({
  selector: ‘app-test‘,
  templateUrl: ‘./test.component.html‘,
  styleUrls: [‘./test.component.scss‘]
})
export class TestComponent implements OnInit {
  alerts: Alert[];
  dismissible = false;

  constructor() { }

  ngOnInit() {
    this. alerts = [
      new Alert(‘标题01‘, ‘内容01‘),
      new Alert(‘标题02‘, ‘内容02‘),
      new Alert(‘标题03‘, ‘内容03‘)
    ];
  }

  onDismissible() {
    this.dismissible = !this.dismissible;
  }
  onReset() {
    this.alerts = this.alerts.map((alert: Alert) => Object.assign(new Alert(‘‘, ‘‘), alert));
  }

}

export class Alert {
  private _title;
  private _content;

  constructor(title, content) {
    this._title = title;
    this._content = content;
  }

  get title() {
    return this._title;
  }

  set title(value) {
    this._title = value;
  }

  get content() {
    return this._content;
  }

  set content(value) {
    this._content = value;
  }
}

TS

　　3.5 在alert组件内动态显示HTML代码

　　　　alert组件内部可以放其它的元素，如果我们想在alert组件内部动态地添加HTML代码，只需要利用ts将HTML代码进行封装即可

　　　　技巧01：在TS中的HTML代码需要利用DomSanitizer服务进行处理

　　　　技巧02：innerHtml和innerText的区别

　　　　　　innerHTML可以识别HTML标签和汉字

　　　　　　innerText会将所有的当成文本处理，而且不能识别汉字

　　　　技巧03：DomSanitizer服务可以实现跨站脚本攻击

　　　　　　参考博文：点击前往

　　　　

<div class="panel panel-primary">
  <div class="panel-heading">在alert组件内部显示HTML代码</div>
  <div class="panel-body">
    <div *ngFor="let alert of alerts;">
      <alert type="success" [type]="alert.type">
        <span [innerHtml]="alert.content"></span>
      </alert>
    </div>
  </div>
  <div class="panel-footer">2018-1-7 22:05:05</div>
</div>

HTML

import { Component, OnInit, SecurityContext } from ‘@angular/core‘;
import { DomSanitizer} from ‘@angular/platform-browser‘;

@Component({
  selector: ‘app-test‘,
  templateUrl: ‘./test.component.html‘,
  styleUrls: [‘./test.component.scss‘]
})
export class TestComponent implements OnInit {
  alerts: Alert[];
  dismissible = false;

  constructor(
    private domSanitizer: DomSanitizer
  ) { }

  ngOnInit() {
    this.alerts = [
      new Alert(‘success‘, `<strong>内容01</strong>`),
      new Alert(‘info‘, `<i>内容02</i>`),
      new Alert(‘warning‘, ‘内容03‘)
    ];
    this.alerts = this.alerts.map((alert: Alert) => new Alert(alert.type, this.domSanitizer.sanitize(SecurityContext.HTML, alert.content)))
  }

}

export class Alert {
  private _type;
  private _content;

  constructor(type, content) {
    this._type = type;
    this._content = content;
  }

  get type() {
    return this._type;
  }

  set type(value) {
    this._type = value;
  }

  get content() {
    return this._content;
  }

  set content(value) {
    this._content = value;
  }
}

TS

　　3.6 动态改变alert组件的内容

　　　　通过一个单机按钮来动态改变alert组件的内容，用一个列表来存储alert组件的内容

　　　　技巧01：*ngIf指令的使用

　　　　　　官方文档：点击前往

<div class="panel panel-primary">
  <div class="panel-heading">动态显示alert组件的内容</div>
  <div class="panel-body">
    <button *ngIf="index < messages.length - 1; else elseblock" class="btn-info" (click)="onAdd()">改变alert组件的内容</button>
    <ng-template #elseblock>
      <button class="btn-warning" (click)="index = 0">Reset</button>
    </ng-template>
    <alert>{{messages[index]}}</alert>
  </div>
  <div class="panel-footer">2018-1-7 22:38:03</div>
</div>

HTML

import { Component, OnInit, SecurityContext } from ‘@angular/core‘;
import { DomSanitizer} from ‘@angular/platform-browser‘;

@Component({
  selector: ‘app-test‘,
  templateUrl: ‘./test.component.html‘,
  styleUrls: [‘./test.component.scss‘]
})
export class TestComponent implements OnInit {
  messages: string[];
  index = 0;

  constructor(
  ) { }

  ngOnInit() {
    this.messages = [
      ‘重庆市大足区‘,
      ‘重庆市沙坪坝区‘,
      ‘重庆市合川区‘
    ];
  }

  onAdd() {
    if (this.index !== this.messages.length - 1) {
      this.index++;
    }
  }

}

　　3.7 定时消失

　　　　待更新......2018-1-7 22:57:39

　　　　

原文地址：https://www.cnblogs.com/NeverCtrl-C/p/8232750.html

时间： 2024-10-08 01:11:53

ngx-bootstrap使用03 Alerts组件、利用Object.assign复制对象的相关文章

真正掌握vuex的使用方法（二）现在有的小伙伴是不是在想，以后如果我要在这里写自己的计算属性怎么办？怎么办？咱们可以通过对象合并的方法去实现。 通过Object.assign()合并对象：

从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍! 接下来咱们来完成一个超级简单的投票功能!要求很简单,点击"投票"按钮,相应的票数会发生加1的变化,另外总票数为所有票数之和,如图所示: 1.首先通过vue-cli生成一个名字叫做demo的项目 vue init webpack demo 2.项目搭建完成以后,安装vuex npm install vuex --save 3.在src目录下创建vuex文件夹,然后在该文

Object.assign(o1, o2, o3) 对象 复制 合拼

Object 对象方法学习之(1)—— 使用 Object.assign 复制对象.合并对象 合并对象 var o1 = {a: 1}; var o2 = {b: 2}; var o3 = {c: 3}; var obj = Object.assign(o1, o2, o3); console.log(obj); //{a: 1, b: 2, c: 3} console.log(o1); //{a: 1, b: 2, c: 3}, 目标对象被改变了 http://www.cnblogs.com/

es6新语法Object.assign()

1.介绍 Object.assign用于对象的合并,将源对象的所有可枚举属性复制到目标对象,只拷贝源对象自身的属性继承属性补考呗 Object.assign(target,source1,...)第一个参数为目标对象,其它为源对象,若有同名属性后面的会覆盖前面的 该方法实现的是浅拷贝,源对象的某个属性是对象,目标对象复制的这个属性是这个对象的引用 2.用途 为对象添加属性.方法.克隆对象.合并多个对象.为属性指定默认值(注意该方法为浅拷贝,只能拷贝基本数据类型) 原文地址:https://www

ES6之Object.assign()详解

译者按: 这篇博客将介绍ES6新增的Object.assign()方法. 原文: ECMAScript 6: merging objects via Object.assign() 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 将A对象的属性复制给B对象,这是JavaScript编程中很常见的操作.这篇博客将介绍ES6的Object.assign()属性,可以用于对象复制. 在JavaScript生态系统中,对象复制有另外一个术语:

JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

原文:JS组件系列--Bootstrap文件上传组件:bootstrap fileinput 前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:

第二百三十八节，Bootstrap输入框和导航组件

Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. 在左侧添加文字 input-group-addon样式class类,写在input同级的span里,给输入框添加一个左片段(Bootstrap)input-group样式class类,写在input外层div里,将

Bootstrap 中的 Typeahead 组件 -- AutoComplete

Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide="typeahead" 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据.当然了,你还必须提供 bootstrap-typeahead.js 脚本. <html> <he

Bootstrap中的 Typeahead 组件

Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的使用思路: 首先,最简单的使用方式,就是直接在标记中声明,通过 data-provide="typeahead" 来声明这是一个 typeahead 组件,通过 data-source= 来提供数据.当然了,你还必须提供 bootstrap-typeahead.js 脚本. 如: <

算法-利用object的key唯一性删除数组重复项

# 利用object的key唯一性删除数组重复项 # uniq.html <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title>   <script type="text/javascript">        var arr=[12,34,2