相关疑难解决方法(0)

我有一个Angular 1应用程序,它使用一个简单的contentEditable指令,可以像这样在模板中使用:

<span contenteditable="true"  ng-model="model.property" placeholder="Something">

编辑元素将触发$setViewValue(element.html()并按预期工作.

我想在Angular2中使用类似的简洁模板语法制作一些东西.理想情况下,我希望模板看起来像这样:

<span contentEditable="true" [(myProperty)]="name"></span>

其中'name'是组件上的属性,并且指令在更改时更新组件.我觉得我很接近这个(Plunker Link):

//our root app component
import {Component, Input, Output Directive, ElementRef, Renderer, OnInit} from 'angular2/core'

@Directive({
    selector: '[contentEditable]',
    host: {
        '(blur)': 'update($event)'
    }
})

export class contentEditableDirective implements OnInit {
    @Input() myProperty;
    constructor(private el: ElementRef, private renderer: Renderer){}

    update(event){
      this.myProperty = this.el.nativeElement.innerText;
    }
    ngOnInit(){
        this.el.nativeElement.innerText =  this.myProperty; 
    }
}

如果我传递一个像这样的对象,这个想法是有效的,{name: "someName"}但是如果只是传递一个属性,它似乎传递了值,而不是引用,因此绑定不会流回到组件.有没有办法做到这一点,仍然允许模板语法不冗长,但仍然允许轻松重用指令.