Angular 双向绑定的输出部分不'；不适用于自定义指令

我正在尝试使用一个属性实现一个指令，该属性将支持如下双向绑定：

[（appfocused）]=“isFocused”

。组件可以将其

isFocused

属性设置为true以关注某个元素，但一旦该元素失去焦点，该变量将恢复为false

我已经读过（和），实现这种绑定的关键是

@Input

和

@Output

有两个属性，它们的名称相同，但输出的后缀是

Change

。这是我到目前为止的实现（在TypeScript中）：

按Focus（焦点）链接可按预期聚焦在

文本区域。但是，从中单击不会重置
isFocused
变量。再次按下链接无效-isFocused的值已为真，因此Angular检测不到任何更改

我遗漏了什么？
正如您提到的文章所述，要使用双向绑定速记语法，输出的名称必须与输入的名称加上“Change”后缀相同

因此，您就快到了—您只需正确命名
@Output（）
：不是“appfocused”，而是“appfocusedChange”：

@Output（'appfocusedChange'）
focusedChange:EventEmitter=新的EventEmitter（）；
谢谢！不知何故，我认为这条规则只适用于变量的名称……是的，这有时会让人困惑——我通常只是保持属性和变量的名称相同，以限制出现这种歧义的可能性
@Directive({
    selector: '[appfocused]'
})
export class FocusedDirective implements OnChanges, AfterViewInit {
    @Input('appfocused')
    focused: boolean;

    @Output('appfocused')
    focusedChange: EventEmitter<boolean> = new EventEmitter();

    constructor(private elementRef: ElementRef, private renderer: Renderer) { }

    ngAfterViewInit() {
        this.renderer.listen(this.elementRef.nativeElement, 'blur', () => {
            this.setFocused(false);
        });
    }

    ngOnChanges() {
        if (this.focused) {
            setTimeout(() => {
                this.elementRef.nativeElement.focus();
            }, 0);
        }
    }

    private setFocused(value: boolean) {
        this.focused = value;
        this.focusedChange.emit(this.focused);
        console.log('focused set to ' + value);
    }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <textarea [(appfocused)]="isFocused"></textarea>
    </div>
    <a (click)="focus()" href="#">Focus</a>
    {{isFocused}}
  `,
})
export class App {
  isFocused = false;

  focus() {
    this.isFocused = true;
  }
}

@Output('appfocusedChange')
focusedChange: EventEmitter<boolean> = new EventEmitter();