如何使用 javascript 从简单的 html 页面触发 Angular Web 组件（自定义元素）上的 Click 事件

Question

我创建了一个 Angular Web 组件，如下所示

@Component({
  selector: 'dlx-comp',
  templateUrl: './comp.component.html',
  styleUrls: ['./comp.component.scss'],
  encapsulation: ViewEncapsulation.Native,
})
export class CompComponent implements OnInit {

  onClick() {
    console.log('alert click');
  }

}

模板也很简单

<button (click)="onClick()"></button>

在我的应用程序模块中

export class AppModule {
  constructor(private injector: Injector) {
  }

  ngDoBootstrap() {
    this.defineElement(compComponent, 'dlx-comp');
  }

  private defineElement(component: any, elementName: string) {
    const el = createCustomElement(component, { injector: this.injector });
    customElements.define(elementName, el);

  }
}

一切正常，我已将它嵌入到一个简单的 HTML 页面中，如下所示

<head>
    <meta charset="utf-8">
    <title>TMIBot</title>
    <base href="/">

    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no">

    <title>Test Angular Elements</title>
    <link rel="stylesheet" href="https://urltomy/dist/dlx-styles-1.0.css">
</head>

<body>
    <button id="button">Open comp </button>
    <dlx-comp id="comp"></dlx-comp>
    <script type="text/javascript" src="https://urltomy/dist/dlx-chatbot-1.0.js"></script>
    <script>
        const button = document.querySelector('#button');
        button.addEventListener('click', () => {
            const comp = document.querySelector('#comp');
            comp.click();
        });
    </script>
</body>
</html>

现在我想调用它的 click 方法。但它什么也没做，控制台没有错误，我也检查了 comp 是否有价值；

Answer 1

那是因为您在 dlx-comp 内的 button 上定义了 (click)，并且您正试图在 dlx-comp 上触发 click 事件，您应该会发现dlx-comp 内的按钮并在其上触发 click

   button.addEventListener('click', () => {
        const comp = document.querySelector('#comp');
        const btn = comp.querySelector('dlx-comp::shadow button');
        btn.click();
    });

如何使用 javascript 从简单的 html 页面触发 Angular Web 组件（自定义元素）上的 Click 事件

How to fire Click event on Angular Web Component (Custom Element) from a simple html page using javascript

custom-element

angular