angular - 从 Angular2 中的指令更改组件属性

Question

我有一个 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"} 这样的对象，这个想法是可行的，但如果只传递一个属性，它似乎传递的是值，而不是引用，所以绑定(bind)不会t 流回组件。有没有一种方法可以做到这一点，它仍然允许模板语法不冗长，但仍然允许轻松重用指令。

Answer 1

该指令不知道其父 name 属性。您可以从指令中发出一个事件并在父级中捕获它。检查这个例子

@Directive({
    selector: '[contentEditable]',
    host: {
        '(input)': 'update($event)' // I changed it to input to see the changes immediatly
    }
})
export class contentEditableDirective implements OnInit {

// Output that will emit outside the directive
@Output() updateProperty: EventEmitter<any> = new EventEmitter();

// When 'update' is called we emit the value
update(event){
  this.updateProperty.emit(this.el.nativeElement.innerText);
}

现在我们的指令正确发出，我们必须在组件中捕获值。 为简洁起见，仅使用模板

<div contentEditable="true" [myProperty]="name" (updateProperty)="name = $event"></div>

updateProperty 是指令中的 @Output。当它被触发时，我们会捕获它，我们发出的值将分配给 $event。之后，我们将 $event 分配给我们的属性 name，您的应用程序就可以运行了。

这是你的 plnkr在职的。希望对您有所帮助。

更新

感谢这个answer我看到你要求的是可能的。

您可以将输出与语法 [()] 脱糖时调用的内容相匹配。如果你有类似 [(myProperty)]="expr" 的语法，它会被脱糖为 [myProperty]="expr"(myPropertyChange)="expr = $event"

所以将原来的答案改成如下

@Output() myPropertyChange: EventEmitter<any> = new EventEmitter();
update(event){
  this.myPropertyChange.emit(this.el.nativeElement.innerText);
}

它会给你这个模板，这就是你一开始要求的。

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

这是 plnkr更新为真正的正确答案。