当事件监听器更改值时，文本插值不会以角度更新

Question

我有两个角度应用程序，其中一个是父应用程序，另一个是加载子应用程序的 iframe。 HTML 非常基本：

<div class="first">
    <label>{{postedMessage}}</label>
</div>
<div id="second">
    <iframe src="http://localhost:4200/" id="displayFrame" title="Compass" width="70%" 
    float="right" height="750px"></iframe>
</div>

父应用程序正在侦听来自子应用程序的 postMessage() 事件，在本例中为 localhost:4200。我知道 postMessage eventListener 正在工作，因为当父级执行 console.log(JSON.stringify(event)) 时，它会按预期记录。事件监听器也会同时更新postedMessage的值，但它不会在UI上更新。我不明白为什么。我尝试添加一个按钮，在调用 (click) 方法时以相同的方式更新值（除了它不是来自事件），并且其工作原理与预期完全一致。

打字稿如下所示：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: '',
  templateUrl: '',
  styleUrls: ['']
})
export class TestComponent {
  postedMessage: string = 'This is a test string';

    constructor() {
        window.addEventListener("message", this.handleEvent, false);
    }

  handleEvent(event: MessageEvent) {
    console.log(JSON.stringify(event));
    this.postedMessage = (JSON.stringify(event));
  }
}

如果有人知道为什么这不起作用，我们将非常感激！感谢

回答卡尔的回答，我无法提供实际的子应用程序代码。但在最基本的方式中，它看起来像这样：

HTML：

<button (click)="postMessage()">Test</button>

Typescript：

postMessage() {
    // This is where I'd calculate the data being sent to the parent
    data: string; // Some JSON string
    window.parent.postMessage(data, this.parentOrigin);
{

这将是显示正在发生的情况的最简单方法，但如果需要，可以编写更深入的示例。

谢谢！

Answer 1

我认为这是因为你需要使你的变量成为可观察流。我认为这将使您的代码正常工作（注意：您需要安装 rxjs 才能使用 BehaviorSubject）：

postedMessage: BehaviorSubject<string> = new BehaviorSubject<string>('This is a test string');

为了确保在 handleEvent 中正确引用类组件的范围，请确保绑定 < code>this：

constructor() {
    window.addEventListener("message", this.handleEvent.bind(this), false);
  }

然后在 handleEvent 函数中执行以下操作：

handleEvent(event: MessageEvent) {
    this.postedMessage.next(JSON.stringify(event));
  }

同时使用异步管道进行插值：

<label>{{ postedMessage | async }}</label>

Answer 2

在父母和孩子之间建立关系。如何？，
请按照以下步骤操作。

1 - 导入输出
将以下代码放入 child.ts 文件中

import { Component Output, EventEmitter } from '@angular/core';

export class childTestComponent {

@Output() postMessage = new EventEmitter();

}

步骤 2
现在转到 child.html 文件并包含这行代码

<button type="button" (click)="postMessage.emit()">Post Message</button>

第 3 步
现在进入父级的 ts 文件并创建一个发射器，如下所示。发射器只是一个函数，但必须从“on”

onPostMessage() {
    *the rest of click event logic goes here*
     window.alert('button has been clicked');
   }

第 4 步 开始
现在转到parent.html 文件并将发射器绑定到包含子组件的行上的事件，例如，

<childComponent (postMessage)="onPostMessage()"></childComponent>

请告诉我这是否有帮助。