উত্তর:
আপনি যদি একই কোডটি বারবার অনুলিপি / অনুলিপি না করে কোনও উপাদানগুলিতে এটি যুক্ত করতে সক্ষম হতে চান তবে আপনি এটি করার জন্য একটি নির্দেশিকা তৈরি করতে পারেন। এটি নীচের মত সহজ:
import {Directive, HostListener} from "@angular/core";
@Directive({
selector: "[click-stop-propagation]"
})
export class ClickStopPropagation
{
@HostListener("click", ["$event"])
public onClick(event: any): void
{
event.stopPropagation();
}
}
তারপরে এটি যে উপাদানটি আপনি চান তাতে এটি যুক্ত করুন:
<div click-stop-propagation>Stop Propagation</div>
@HostListener("mousedown", ["$event"]) public onMousedown(event: any): void { event.stopPropagation(); }
সবচেয়ে সহজ হ'ল ইভেন্ট হ্যান্ডলারটিতে স্টপ প্রচারকে কল করা। $eventকৌনিক 2 তে একই কাজ করে এবং চলমান ইভেন্ট (এটির মাধ্যমে একটি মাউস ক্লিক, মাউস ইভেন্ট ইত্যাদি) অন্তর্ভুক্ত করে:
(click)="onEvent($event)"
ইভেন্ট হ্যান্ডলারে, আমরা সেখানে প্রচার বন্ধ করতে পারি:
onEvent(event) {
event.stopPropagation();
}
<button confirmMessage="are you sure?" (click)="delete()">Delete</button>, এবং আমার নির্দেশে:, (click)="confirmAction($event)তারপর confirmAction(event) { event.stopPropagation(); };
eventহ্যান্ডলারের কার্য সম্পাদন করার সময়টি stopPropogation()উপলভ্য নয়। আমাকে ঠিক এটি মার্কআপে করতে হয়েছিল: `(ক্লিক করুন) =" foo (); $ ইভেন্ট.স্টপপ্রপেশন () "
stopPropagationইভেন্টে কল করা প্রচারকে বাধা দেয়:
(event)="doSomething($event); $event.stopPropagation()"জন্য preventDefaultঅবশ্য বিনিময়েfalse
(event)="doSomething($event); false";শেষ যদিও এ। আমি এটা পরিবর্তন করব।
false
@ অ্যান্ড্রয়েড ইউনিভার্সিটি থেকে উত্তর যুক্ত করা হচ্ছে। একটি এক লাইনে আপনি এটি লিখতে পারেন:
<component (click)="$event.stopPropagation()"></component>
আপনি যদি কোনও ইভেন্টে আবদ্ধ পদ্ধতিতে থাকেন তবে কেবল মিথ্যা ফিরিয়ে দিন:
@Component({
(...)
template: `
<a href="https://stackoverflow.com/test.html" (click)="doSomething()">Test</a>
`
})
export class MyComp {
doSomething() {
(...)
return false;
}
}
falseকল preventDefaultনা stopPropagation।
preventDefaultতাকে বলা হয়। github.com/angular/angular/blob/… , github.com/angular/angular/blob/…
এটি আমার পক্ষে কাজ করেছে:
mycomponent.component.ts:
action(event): void {
event.stopPropagation();
}
mycomponent.component.html:
<button mat-icon-button (click)="action($event);false">Click me !<button/>
উপরে ওঠা অ্যাকর্ডিয়ান আইটেমটি প্রসারিত করতে একটি বোতাম আটকাতে আমাকে stopPropigationএবং করতে preventDefaultহয়েছিল।
তাই ...
@Component({
template: `
<button (click)="doSomething($event); false">Test</button>
`
})
export class MyComponent {
doSomething(e) {
e.stopPropagation();
// do other stuff...
}
}
আইই (ইন্টারনেট এক্সপ্লোরার) এর জন্য কিছুই কাজ করেনি। আমার পরীক্ষকগণ এর পিছনে বোতামগুলিতে পপআপ উইন্ডোটি ক্লিক করে আমার মডেলটি ভেঙে ফেলতে সক্ষম হন। সুতরাং, আমি আমার মডেল স্ক্রিন ডিভিতে ক্লিক করার জন্য শুনলাম এবং পপআপ বোতামে জোর করে রিফোকস করলাম।
<div class="modal-backscreen" (click)="modalOutsideClick($event)">
</div>
modalOutsideClick(event: any) {
event.preventDefault()
// handle IE click-through modal bug
event.stopPropagation()
setTimeout(() => {
this.renderer.invokeElementMethod(this.myModal.nativeElement, 'focus')
}, 100)
}
আমি মাত্র একটি কৌণিক 6 অ্যাপ্লিকেশনটিতে চেক করেছি, ইভেন্ট.স্টপপ্রপাগেশন () এমনকি ইভেন্টটি পাস না করে ইভেন্ট হ্যান্ডলারের উপর কাজ করে
(click)="doSomething()" // does not require to pass $event
doSomething(){
// write any code here
event.stopPropagation();
}
<a href="#" onclick="return yes_js_login();">link</a>
yes_js_login = function() {
// Your code here
return false;
}
<a class="list-group-item list-group-item-action" (click)="employeesService.selectEmployeeFromList($event); false" [routerLinkActive]="['active']" [routerLink]="['/employees', 1]">
RouterLink
</a>
public selectEmployeeFromList(e) {
e.stopPropagation();
e.preventDefault();
console.log("This onClick method should prevent routerLink from executing.");
return false;
}
তবে এটি রাউটারলিঙ্ক কার্যকর করতে অক্ষম করে না!
ফাংশনের পরে মিথ্যা যোগ করা ইভেন্টের প্রচার বন্ধ করবে
<a (click)="foo(); false">click with stop propagation</a>
এটি আমার সমস্যার সমাধান করে, প্রতিরোধ থেকে যে কোনও ইভেন্ট শিশুদের দ্বারা চালিত হয়:
doSmth(){
// what ever
} <div (click)="doSmth()">
<div (click)="$event.stopPropagation()">
<my-component></my-component>
</div>
</div>এই নির্দেশ চেষ্টা করুন
@Directive({
selector: '[stopPropagation]'
})
export class StopPropagationDirective implements OnInit, OnDestroy {
@Input()
private stopPropagation: string | string[];
get element(): HTMLElement {
return this.elementRef.nativeElement;
}
get events(): string[] {
if (typeof this.stopPropagation === 'string') {
return [this.stopPropagation];
}
return this.stopPropagation;
}
constructor(
private elementRef: ElementRef
) { }
onEvent = (event: Event) => {
event.stopPropagation();
}
ngOnInit() {
for (const event of this.events) {
this.element.addEventListener(event, this.onEvent);
}
}
ngOnDestroy() {
for (const event of this.events) {
this.element.removeEventListener(event, this.onEvent);
}
}
}ব্যবহার
<input
type="text"
stopPropagation="input" />
<input
type="text"
[stopPropagation]="['input', 'click']" />