Question

我有组件A，里面有组件B. 组件A有一个显示绑定属性的模板。

我点击组件B按钮，它发出组件A的消息。组件A捕获它并更新属性，但模板不刷新值。

如果我在此点击另一次，我会显示消息。

因此，由于某种原因，它没有第一次用消息刷新模板，但为什么？

我检查了日志并正确点击了onNotify。

组件A

@Component({
    selector: '...',
    templateUrl: '...'
})
export class ComponentA {

    message: string;

    constructor(...) {...}

    onNotify(message: string): void {
        this.message = message;
    }
}

组件A模板

<div class="message">
  {{message}}
</div>
<component-b (notify)='onNotify($event)'></component-b>

组件B

@Component({
    selector: 'component-b',
    templateUrl: '...'
})
export class ComponentB {

    @Output() notify: EventEmitter<string> = new EventEmitter<string>();

    constructor(...) {...}

    onClick() {
        this.notify.emit('Message');
    }
}

这里有一些我使用的代表

"@angular/common": "2.3.0",
"@angular/compiler": "2.3.0",
"@angular/core": "2.3.0",
"@angular/forms": "2.3.0",
"@angular/http": "2.3.0",
"@angular/platform-browser": "2.3.0",
"@angular/platform-browser-dynamic": "2.3.0",
"@angular/platform-server": "2.3.0",
"@angular/router": "3.3.0",

感谢您的帮助，了解这一点。

Answer 1

我找到了解决方法。我不满意，所以如果有人找到一个干净的解决方案......

我强制框架检测onNotify方法中的更改。

我从ChangeDetectorRef导入了@angular/core。在我的属性更新后使用detectChanges()方法。

Answer 2

ChangeDetectorRef就是您应该使用的：

@Component({
    selector: '...',
    templateUrl: '...'
})
export class ComponentA {
      message: string;

      constructor(private ref: ChangeDetectorRef) { }

      onNotify(message: string): void {
        this.message = message;
        // trigger the view update
        this.ref.markForCheck();
      }
}

嵌套组件的绑定问题

2 个答案: