angular - @HostListener doesn't work in a complicated page - Stack Overflow

admin管理员组

文章数量:1400182

I have many Angular components; They all have a method with @HostListener And I converted them into web components on @angular/elements and embedded them in some legacy JSP/JSF pages.

This approach works very well and many web components are working properly in those legacy pages.

But now I find one component is not listening the event for @HostListener.

So I tried those:

• Embedded this component into a simple JSP/JSF page and it works
• Embedded another component with @HostListener method into this page and it works
• Try to find big difference between those two components and found nothing
• Debug the code in complicated JSP/JSF page and found the component is created and initialized.

My versions:

"@angular/core": "^15.2.9",
"@angular/elements": "^15.2.9",

A part of my code:

  @HostListener('window:onExchangeRateTrigger', ['$event'])
  handleExchangeRateTrigger(e: CustomEvent) {

    console.log(" never get here");
  }

In JSP/JSF side:

        function openExchangeRateWarn(ProgramId) {

            var event = new CustomEvent("onExchangeRateTrigger", {
                detail: {
                    currencyCode: "CAD",
                    currencyRate: 0.32,
                    duration: 8000,
                    programId: ProgramId,
                }
            });
            window.dispatchEvent(event);
        }

I have many Angular components; They all have a method with @HostListener And I converted them into web components on @angular/elements and embedded them in some legacy JSP/JSF pages.

This approach works very well and many web components are working properly in those legacy pages.

But now I find one component is not listening the event for @HostListener.

So I tried those:

• Embedded this component into a simple JSP/JSF page and it works
• Embedded another component with @HostListener method into this page and it works
• Try to find big difference between those two components and found nothing
• Debug the code in complicated JSP/JSF page and found the component is created and initialized.

My versions:

"@angular/core": "^15.2.9",
"@angular/elements": "^15.2.9",

A part of my code:

  @HostListener('window:onExchangeRateTrigger', ['$event'])
  handleExchangeRateTrigger(e: CustomEvent) {

    console.log(" never get here");
  }

In JSP/JSF side:

        function openExchangeRateWarn(ProgramId) {

            var event = new CustomEvent("onExchangeRateTrigger", {
                detail: {
                    currencyCode: "CAD",
                    currencyRate: 0.32,
                    duration: 8000,
                    programId: ProgramId,
                }
            });
            window.dispatchEvent(event);
        }

• angular
• angular-elements

Share Improve this question Follow edited Mar 25 at 17:25 Justin Wu asked Mar 25 at 15:10 Justin WuJustin Wu 1133 bronze badges 3

• is VcapsEventType.onExchangeRateTrigger === "onExchangeRateTrigger12356" ? – Andrei Commented Mar 25 at 16:33
• @Andrei, Yes, VcapsEventType.onExchangeRateTrigger === "onExchangeRateTrigger12356" – Justin Wu Commented Mar 25 at 17:24
• @JustinWu are you emitting from inside an iframe? try this ngOnInit() { document.addEventListener("myEvent",() => { console.log('it works'); },false) }; this will confirm whether the hostlistener alone has the problem – Naren Murali Commented Mar 26 at 11:52

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Finally I figured out the root cause:

Some parts of my JSP page are dynamically loaded in the client Side within iFrame , which cut my single JSP page into multiple JS context. The trigger and its related component fell into different JS context.

The fixing is simple, I just put them together.

本文标签： angularHostListener doesn39t work in a complicated pageStack Overflow