Я создал угловой веб-компонент, как показано ниже
@Component({
selector: 'dlx-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss'],
encapsulation: ViewEncapsulation.Native,
})
export class SliderComponent implements OnInit {
open() {
console.log('open');
}
close() {
console.log('close');
}
}
, и в моем модуле приложения
export class AppModule {
constructor(private injector: Injector) {
}
ngDoBootstrap() {
this.defineElement(SliderComponent, 'dlx-slider');
}
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 Slider </button>
<dlx-slider id="slider"></dlx-slider>
<script type="text/javascript" src="https://urltomy/dist/dlx-chatbot-1.0.js"></script>
</body>
</html>
Теперь я хочу вызвать для него метод open
.Я не могу найти способ для этого
<script>
const button = document.querySelector('#button');
button.addEventListener('click', () => {
console.log('button Click');
const slider = document.querySelector('#slider');
console.log(slider);
slider.open();
});
</script>