Stencil：通过 DOM 从另一个组件调用公共方法

Question

I have a Stencil sidebar component with a refresh() method. I've exposed it with @Method() :

@Method() async refresh() { ... }

and I can call it from my app:

const sidebar = document.querySelector('my-sidebar');
await sidebar.refresh();

However, I also have a popup component which is generated ad-hoc by the app via a separate API, and I want to make a button in the popup trigger the sidebar's refresh() . I've set the method as a Prop on the popup:

@Prop() refresh: Function;

and I've set the Prop in the app code as a reference to the method:

popup.refresh = sidebar.refresh;

...but when I try to execute it I get an error:

Uncaught (in promise) TypeError: ref.$lazyInstance$[memberName] is not a function

How can I get the popup to see the sidebar's method?

Answer 1

If you look at the value of sidebar.refresh in your app when you're trying to assign that Prop, you'll see something like this:

value(...args) {
  const ref = getHostRef(this);
  return ref.$onInstancePromise$.then(() => ref.$lazyInstance$[memberName](...args));
}

Stencil components are lazy-loaded by generating proxies with references pointing to methods, so you're just passing a reference to a proxy. The easiest way to fix this is to make a function which explicitly calls the method, forcing its hydration. (If the source component is not already hydrated, you'll need to wait for that first by using its lifecycle methods.)

Here's what that would look like in your app:

popup.refresh = () => sidebar.refresh();

// or, passing any arguments:
popup.refresh = args => sidebar.refresh(args);

You can also do it in your popup component:

async popupRefresh() {
  let sidebar = document.querySelector('my-sidebar');
  await sidebar.refresh();
}

If calling the method from inside another component in this way, you may see the TypeScript error Property 'refresh' does not exist on type 'Element'.

To avoid this, import the sidebar component into your popup component:

import { mySidebar } from 'stencil';

Then, use it as the type:

let sidebar: mySidebar = document.querySelector('my-sidebar');