当 eventListener 更改值时，文本插值不会在 angular 中更新

Question

我有两个 angular 应用程序，其中一个是带有加载子应用程序的 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>

打字稿：

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

创建父子关系。如何？，按照以下步骤操作。

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>

如果有帮助请告诉我。

Answer 2

我想这是因为你需要让你的变量成为一个 Observable 流。这是我认为可以使您的代码工作的方法（注意：您需要安装 rxjs 才能使用 BehaviorSubject）：

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

要确保在 handleEvent 中正确引用 class 组件的范围，请确保绑定 this:

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

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

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

也使用异步管道进行插值：

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

当 eventListener 更改值时，文本插值不会在 angular 中更新

Text Interpolation is not updating in angular when an eventListener changes the value

interpolation

typescript

angular