如何将数据从 Angular 组件传递到纯 html 页面答案

【问题标题】：How to pass data from Angular Component to plain html page如何将数据从 Angular 组件传递到纯 html 页面
【发布时间】：2021-08-09 18:04:02
【问题描述】：

我在静态 html 页面中使用 Angular Web 组件。我能够将数据注入 Angular 组件。但是当我尝试从 Angular 组件检索数据到 HTML 页面时，它不起作用。我不确定我在这里做错了什么。

代码如下：

组件 ts 代码

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

  outputMessage:string="I am child component."
  
  sendValues() {
    this.myOutput.emit(this.outputMessage);
  }

组件 html 代码

<button (click)="sendValues"> Send Data </button>

静态 html 中的 JS 代码

   var commCompTag = document.getElementsByTagName('comm-comp');
   if(commCompTag.length > 0){
      console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>');
      commCompTag[0].addEventListener('myoutput', (event) => {
         var evtDetails = event;
         console.log('evtDetails >>> ', evtDetails);
         console.log(event.detail);
      });
      // commCompTag[0].addEventListener('myoutput', function(event) {
      //   var evtDetails1 = event;

      //   console.log('evtDetails1 >>> ', evtDetails1);
      //   console.log(event.originalEvent.detail);
      // });
   }

我已经通过参考Angular Elements EventEmmitter : $event not showing emitted value 尝试了上述解决方案，但它并没有帮助我。所以如果有人能给我一些解决这个问题的建议，那就太好了。

https://stackblitz.com/edit/angular-ivy-vnrj8a

【问题讨论】：

输入一些内容作为输出的名称，即@Output("myOutput") ...，或者使用字符串'myOutput'作为事件的名称，而不是全部小写的值。据我所知，事件名称不应该区分大小写，但在 Web 组件的美好新世界中，我不确定 :)。

标签： javascript angular web-component

【解决方案1】：

由于 index.html 在技术上不是引导 Angular 应用程序的一部分，因此您可能需要求助于非 Angular 特定的解决方案。

一种方法/POC 可能是执行以下操作。

通过构造函数获取对my-app元素的引用

constructor(private elRef: ElementRef) {}

在nativeElement 上构造和调度事件

sendValues() {
    console.log('sending values');
    this.myOutput.emit(this.outputMessage);
    const event = new CustomEvent('my-app-data', {
      detail: {
        value: {
          message: this.outputMessage
        }
      }
    });
    this.elRef.nativeElement.dispatchEvent(event);
  }

在index.html注册以监听该事件

jsonCommCompTag[0].addEventListener('my-app-data', function(event) {
      var evtDetails1 = event;

      console.log('evtDetails1 >>> ', evtDetails1.detail.value.message);
    });

不要忘记在app.component.html 中的按钮单击事件处理程序中调用

(click)="sendValues()"

堆栈闪电战

https://stackblitz.com/edit/angular-ivy-zbj7ru?file=src/index.html

【讨论】：