Rez*_*eza 6 web-component custom-element angular
我创建了一个如下所示的 Angular Web 组件
@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>
小智 5
在 Angular 8 中我刚刚做了
@Input()
doFoo() {
console.log('we did it');
}
它起作用了
Setter并且Getter可以提供调用该方法的选项。
set state(state:string) {
console.log("state changed ", state);
}
get state() {
return "IN";
}
<script>
const button = document.querySelector('#button');
button.addEventListener('click', () => {
console.log('button Click');
const slider = document.querySelector('#slider');
console.log(slider);
//slider.open();
setTimeout(() => {
slider.setAttribute('state', 'OUT');
}, 1000);
});
</script>
| 归档时间： |
|
| 查看次数： |
3460 次 |
| 最近记录： |