[英]Angular 8 , 9 : How to block individual reusable component(ng-block-ui integrated) that used multiple time in a page | ie. create multiple instances?
I found the answer!!我找到了答案!! to this problem.到这个问题。
By providing randomly generated id each time the component gets called, and targeting that ID in call of block-ui instance it worked通过在每次调用组件时提供随机生成的 id,并在调用block-ui 实例时以该ID 为目标,它工作
// Generate random string assign to specific
// core-card to only block that specific card
public coreCardId: string = Math.random().toString(36).substring(2);
// block ui on 'reload' method call
reload(event) {
this.blockUIService.start(this.coreCardId);
// block-ui timeout
setTimeout(() => {
this.blockUIService.stop(this.coreCardId);
}, 2500);
}
I have used Block-ui service for this :我为此使用了 Block-ui 服务:
// ng-block-ui service
import { BlockUIService } from 'ng-block-ui';
It helped me to target that specific id that I clicked and want to block that element in HTML它帮助我定位我单击的特定 id 并希望在 HTML 中阻止该元素
SEE IMAGE FOR MORE REFERENCE更多参考图片
You can use a CSS based approach to block individual card UI.您可以使用基于 CSS 的方法来阻止单个卡片 UI。
Use the card-blocker
class to your card and it will create a UI blocker on the top of the card making it inaccessible.对您的卡片使用card-blocker
类,它将在卡片顶部创建一个 UI 阻止程序,使其无法访问。
<div class="card card-blocker" (click)="onClick($event)">
// card body
<div>
.card-blocker::after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background: rgba(192,192,192,0.1);
}
Also if you want to explicitly prevent any click event, use the method in your component side:此外,如果您想明确阻止任何点击事件,请在您的组件端使用该方法:
onClick(e: Event): void {
if ((e.target as HTMLElement).classList.contains('card-blocker')) {
return;
}
// your logic for card click
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.