增加焦点输入的宽度为angular2

Question

我是angular2的新手,我有一个问题,我的输入有一个属性autoGorw它是一个自定义指令,有两个events (焦点)和(模糊),onFocus()我想增加输入大小,onBlur()我想减小其大小默认大小,events在控制台中一直是触发和显示结果,但是input大小没有增加,我的控制台中没有任何错误,我不知道我缺少什么.

对不起,我尝试过Plunker现场演示,让你很容易理解,但无法制作一个.

这是我的代码

自动grow.directive.ts

import {Directive, ElementRef, Renderer} from '@angular/core'

// ElementRef => Gives access to host element
// Renderer => Gives access to modify that element

@Directive({
  selector: '[autoGrow]',
  host:{
    '(focus)' : 'onFocus()',
    '(blur)' : 'onBlur()'
  }
})
export class AutoGrowDirective{
constructor(private el : ElementRef, private renderer : Renderer){       
}    
onFocus(){
    console.log("Triggered !"); // its working upto this line.
    this.renderer.setElementStyle(this.el.nativeElement,'Width','500');
}
onBlur(){
    this.renderer.setElementStyle(this.el.nativeElement,'Width','120');
 }
}

courses.component.ts

import {Component} from '@angular/core'
import {AutoGrowDirective} from './auto-grow.directive'

@Component({
  selector:"courses",
  template:`
  <h2>This is Courses component</h2>
  <p>{{ title }}</p>
  <input type="text" autoGrow />
  `,
  directives: [AutoGrowDirective] 
})

export class CoursesComponent{
  title = 'This is the title of Courses Page!';
}

app.component.ts

import { Component } from '@angular/core';
import {CoursesComponent} from './courses.component';

@Component({
  selector: 'my-app',
  template: '<h1>Hello Angular!</h1><courses></courses>',
  directives:[CoursesComponent]
})
export class AppComponent { }

HTML

在html里面,我有选择器

<my-app>Loading Please wait...</my-app>

Answer 1

我猜你只是错过px了'500px','width'应该是小写的.

我会这样做:

@Directive({
  selector: '[autoGrow]',
})
export class AutoGrowDirective {
  @HostBinding('style.width.px')
  width:number = 120;

  @HostListener('focus')
  onFocus() {
    this.width=500;
  }

  @HostListener('blur')
  onBlur(){
    this.width = 120;
  }
}

Plunker的例子