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