Angular 以角度2增加焦点上的输入宽度

我是angular2新手，我的输入有一个问题，它有一个属性autoGorw它是一个自定义指令，有两个

事件
（焦点）和（模糊），
onFocus（）
我想增加输入大小，而
onBlur（）
我想将大小减小到默认大小，
事件
都已触发并在控制台中显示结果，但是
输入
大小没有增加，我的控制台中没有任何错误，我不知道我缺少了什么

对不起我尝试了
Plunker
进行现场演示，以使您易于理解，但未能制作一个

这是我的代码

自动增长指令.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');
 }
}

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!';
}

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 { }

课程.组件.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');
 }
}

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!';
}

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 { }

从'@angular/core'导入{Component}
从“./auto grow.directive”导入{autogrow directive}
@组成部分({
选择器：“课程”，
模板：`
这是课程组成部分
{{title}}

`,
指令：[自动增长指令]
})
导出类课程组件{
title='这是课程页面的标题！'；
}

应用程序组件.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');
 }
}

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!';
}

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 { }

从'@angular/core'导入{Component}；
从“./courses.component”导入{CoursesComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：“你好！”，
指令：[课程组件]
})
导出类AppComponent{}

HTML

在html内体中，我有选择器

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

正在加载，请稍候。。。
我猜您在
'500px'
中只缺少了
px
，而
'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;
  }
}

在宽度中添加“px”对我来说很好

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

@Directive({
  selector: '[autoGrow]',
  host: {
    '(focus)': 'onFocus()',
    '(blur)': 'onBlur()'
  }
})

export class AutoGrowDirective {
  constructor(private el: ElementRef, private renderer: Renderer) {

  }
  onFocus() {
    this.renderer.setElementStyle(this.el.nativeElement, 'width', '200px');
  }
  onBlur() {
    this.renderer.setElementStyle(this.el.nativeElement, 'width', '100px');
  }
}

Plunker editor中的
New
按钮提供了一个很好的Angular2 TS模板。对于我处理
事件的方式有什么错误，有什么解释吗？顺便说一句，添加
px
不起作用。实际上我觉得一切都很好。你可以试试
'width'
小写字母。我正要把它添加到我的初始答案中，但却怀疑大小写是否重要：D