updates

沈斌

2018-07-12 1dfc8bc300a6ae0822514ddf2e1399d4762fa1b1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import { Component, HostBinding, ViewChild, Input, OnInit, ElementRef, AfterViewInit } from '@angular/core';
 
@Component({
    selector: 'header-search',
    template: `
    <nz-input nzPlaceHolder='{{ "top-search-ph" | translate}}' [(ngModel)]="q"
        (nzFocus)="qFocus()" (nzBlur)="qBlur()">
        <ng-template #prefix>
            <i class="anticon anticon-search"></i>
        </ng-template>
    </nz-input>
    `
})
export class HeaderSearchComponent implements AfterViewInit {
 
    q: string;
 
    qIpt: HTMLInputElement;
 
    @HostBinding('class.header-search__focus')
    focus = false;
 
    @HostBinding('class.header-search__toggled')
    searchToggled = false;
 
    @Input()
    set toggleChange(value: boolean) {
        if (typeof value === 'undefined') return;
        console.log('toggleChange', value);
        this.searchToggled = true;
        this.focus = true;
        setTimeout(() => this.qIpt.focus(), 300);
    }
 
    constructor(private el: ElementRef) {}
 
    ngAfterViewInit() {
        this.qIpt = (this.el.nativeElement as HTMLElement).querySelector('.ant-input') as HTMLInputElement;
    }
 
    qFocus() {
        this.focus = true;
    }
 
    qBlur() {
        this.focus = false;
        this.searchToggled = false;
    }
}