Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(components): ViewChild instead of querying dom

Browse source
This commit is contained in:
nixa 2016-05-20 20:00:36 +03:00
parent b05f525a7c
commit d1307b8f58
4 changed files with 10 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app/theme/components/baBackTop/baBackTop.component.ts
View file

@ -1,10 +1,10 @@
import {Component, HostListener, Input, ElementRef} from '@angular/core'; import {Component, ViewChild, HostListener, Input, ElementRef} from '@angular/core';
@Component({ @Component({
selector: 'ba-back-top', selector: 'ba-back-top',
styles: [require('./baBackTop.scss')], styles: [require('./baBackTop.scss')],
template: ` template: `
<i class="fa fa-angle-up back-top ba-back-top" title="Back to Top"></i> <i #baBackTop class="fa fa-angle-up back-top ba-back-top" title="Back to Top"></i>
` `
}) })
export class BaBackTop { export class BaBackTop {
@ -13,7 +13,9 @@ export class BaBackTop {
@Input() showSpeed:number = 500; @Input() showSpeed:number = 500;
@Input() moveSpeed:number = 1000; @Input() moveSpeed:number = 1000;
constructor (private _elementRef:ElementRef) { @ViewChild('baBackTop') private _selector:ElementRef;
ngAfterViewInit () {
this._onWindowScroll(); this._onWindowScroll();
} }
@ -25,7 +27,7 @@ export class BaBackTop {
@HostListener('window:scroll') @HostListener('window:scroll')
_onWindowScroll():void { _onWindowScroll():void {
let el = this._elementRef.nativeElement.querySelector('.ba-back-top'); let el = this._selector.nativeElement;
window.scrollY > this.position ? $(el).fadeIn(this.showSpeed) : $(el).fadeOut(this.showSpeed); window.scrollY > this.position ? $(el).fadeIn(this.showSpeed) : $(el).fadeOut(this.showSpeed);
} }
} }

10
src/app/theme/components/baChartistChart/baChartistChart.component.ts
View file

@ -1,4 +1,4 @@
import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core'; import {Component, ViewChild, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
import {Chartist} from './baChartistChart.loader.ts'; import {Chartist} from './baChartistChart.loader.ts';
@ -18,14 +18,10 @@ export class BaChartistChart {
@Input() baChartistChartClass:string; @Input() baChartistChartClass:string;
@Output() onChartReady = new EventEmitter<any>(); @Output() onChartReady = new EventEmitter<any>();
constructor (private _elementRef:ElementRef) { @ViewChild('baChartistChart') private _selector:ElementRef;
}
ngAfterViewInit() { ngAfterViewInit() {
let el = this._elementRef.nativeElement.querySelector('.ba-chartist-chart'); let chart = new Chartist[this.baChartistChartType](this._selector.nativeElement, this.baChartistChartData, this.baChartistChartOptions, this.baChartistChartResponsive);
let chart = new Chartist[this.baChartistChartType](el, this.baChartistChartData, this.baChartistChartOptions, this.baChartistChartResponsive);
this.onChartReady.emit(chart); this.onChartReady.emit(chart);
} }
} }

2
src/app/theme/components/baChartistChart/baChartistChart.html
View file

@ -1 +1 @@
<div class="ba-chartist-chart {{baChartistChartClass || ''}}"></div> <div #baChartistChart class="ba-chartist-chart {{baChartistChartClass || ''}}"></div>

3
src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
View file

@ -15,9 +15,6 @@ export class BaFullCalendar {
@ViewChild('baFullCalendar') private _selector:ElementRef; @ViewChild('baFullCalendar') private _selector:ElementRef;
constructor () {
}
ngAfterViewInit() { ngAfterViewInit() {
let calendar = $(this._selector.nativeElement).fullCalendar(this.baFullCalendarConfiguration); let calendar = $(this._selector.nativeElement).fullCalendar(this.baFullCalendarConfiguration);
this.onCalendarReady.emit(calendar); this.onCalendarReady.emit(calendar);