Я создал угловой веб-компонент, как показано ниже
@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 имеет значение;