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

Question

我在静态 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>

静态JS代码html

   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);
      // });
   }

我已经参考尝试了上述解决方案，但它并没有帮助我。所以如果有人能给我一些解决这个问题的建议就太好了。

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

Answer 1

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

其中一个approach/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()"

STACKBLITZ

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

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

How to pass data from Angular Component to plain html page

javascript

web-component

angular