点亮元素事件侦听器不会强制重新渲染

Question

I have the following code:

  @property({type: Number}) ScreenSizeEnum = ScreenSize.Desktop;

  @property({type: Array}) menuData: IMenu[] = [];
  @property({type: Boolean}) isMobileMenuOpen: boolean = false;


  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();
    window.addEventListener('resize', this.onResizeEvent);
  }

  disconnectedCallback() {
    window.removeEventListener('resize', this.onResizeEvent);
    super.disconnectedCallback();
  }

  onResizeEvent() {
    let oldVal = this.ScreenSizeEnum;
    if (window.outerWidth > 1000) {
      this.ScreenSizeEnum = ScreenSize.Desktop;
    } else if (window.outerWidth > 700 && window.outerWidth < 1000) {
      //Tablet
      this.ScreenSizeEnum = ScreenSize.Tablet;
    } else if (window.outerWidth < 700) {
      // mobile
      this.ScreenSizeEnum = ScreenSize.Mobile;
    }
    
  }


  render() {
    let device = this.getDeviceType();

    if (device == "desktop" || this.ScreenSizeEnum == ScreenSize.Desktop) {
      return html`
      <nav class="animate__animated animate__bounce animate__slow">
        <ul class="menu-ul">
       ${this.menuData.map(
        menuItem => html`
           <universe-menu-main .linkText="${menuItem.linkText}" .link="${menuItem.link}" .subMenu="${menuItem.subMenu}"></universe-menu-main>
          `
      )}
        </ul>
     </nav>

    `
    } else if (device == 'tablet' || this.ScreenSizeEnum == ScreenSize.Tablet) {
      return html`
        <tablet-menu .menuData="${this.menuData}"></tablet-menu>
    `;
    } else if (device == 'mobile' || this.ScreenSizeEnum == ScreenSize.Mobile) {
      return html`
      <mobile-menu .menuData="${this.menuData}" .isOpen="${this.isMobileMenuOpen}"></mobile-menu>
    `;
    }


  }

  getDeviceType() {
    const ua = navigator.userAgent;
    if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
      return "tablet";
    }
    if (
      /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
        ua
      )
    ) {
      return "mobile";
    }
    return "desktop";
  };

The resize event is fired, however whenever it changes the ScreenSizeEnum , the render function does not run.

Why does this happen, and how might I fix this?

Answer 1

Your problem is on how you have subscribed to the events and the funky behaviour of this in JS:

window.addEventListener('resize', this.onResizeEvent);

This means that inside onResizeEvent() the term this will refer to the window being resized, not your component.

You can fix this by using a lambda to force the this context (as inside the => body this is always the current context, not the event's:

window.addEventListener('resize', () => this.onResizeEvent());

Now, when onResizeEvent() event fires, inside it this will refer to the control, not the window.

The problem is that now you can't unsubscribe. We need to keep a reference to the wrapped method to remove it:

connectedCallback() {
    super.connectedCallback();
    window.addEventListener('resize', this.resizeContext, { capture: false, passive: true });
}

disconnectedCallback() {
    window.removeEventListener('resize', this.resizeContext);
    super.disconnectedCallback();
}

private readonly resizeContext: () => void = () => this.onResizeEvent();

As this is an external event causing an update it's a better fit for a ReactiveController to fire an update on the window events, and isolate all this resize code from your component.