ngx-bootstrap学习笔记(一)-popover

前言

这月做了个ng2模块，其中有个校验功能，当校验不通过时给出提示，项目中使用jQuery实现，今天才发现ngx-bootstrap已经有现成功能了，且可封装成通用组件放入shareModule,使用方便。故记录如下。

安装

npm install ngx-bootstrap --save

引入模块

import {PopoverModule} from 'ngx-bootstrap/';

@NgModule({
  declarations: [XxxComponent...],
  imports: [
    BrowserModule,
    PopoverModule.forRoot(),
    FormsModule
  ],
  providers: [XxxService...],
  bootstrap: [XxxComponent]
})

封装组件

popover.component.ts

import {Component, ViewChild} from '@angular/core';
import {PopoverDirective} from 'ngx-bootstrap';

@Component({
  selector: 'nepsd-popover',
  templateUrl: './popover.component.html',
  styleUrls: ['./popover.component.css']
})
export class PopoverComponent {
  @ViewChild('pop') popover: PopoverDirective;
}

popover.component.html

<span popover #pop="bs-popover">
  <ng-content></ng-content>
</span>

popover.component.css

	:host > > > .popover {
	  background-color: #FCFCFC;
	}
	:host > > > .popover > .arrow:after {
	  border-top-color: #FCFCFC;
	}

其他组件引用

app.component.ts

import {Component, ViewChild} from '@angular/core';
import {PopoverComponent} from './popover/popover.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tip: string;
  @ViewChild('pop') popoverComponent: PopoverComponent;

  validInput() {
    let valid = Math.random() > 0.5;
    if (!valid) {
      /**pop config*/
      this.popoverComponent.popover.popoverTitle = undefined;
      this.popoverComponent.popover.popover = this.tip;

      this.popHover();
    }
  }

  private popHover(timeout?: number) {
    timeout = timeout ? timeout : 1000;
    this.popoverComponent.popover.show();
    setTimeout(() => {
      this.popoverComponent.popover.hide();
    }, timeout);
  }
}

app.component.html

<div style="margin-top: 100px">
  <nepsd-popover #pop>
    <input [(ngModel)]="tip" (change)="validInput()" (blur)="popHover()">
  </nepsd-popover>
</div>

效果

参考

ngx-bootstrap