模板:通过DOM从另一个组件调用公共方法

Question

我有一个带有refresh()方法的模板侧边栏组件。我已经用@Method()暴露了它

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

我可以在我的应用程序中调用它：

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

然而，我也有一个弹出式组件，它是由应用程序通过一个单独的应用程序接口生成的，我想使弹出式组件中的一个按钮触发侧边栏的refresh()。我已经在弹出窗口中将该方法设置为Prop：

@Prop() refresh: Function;

并且我已经在应用程序代码中将Prop设置为对该方法的引用：

popup.refresh = sidebar.refresh;

...but当我尝试执行它时，我得到一个错误：

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

怎样才能让弹出窗口看到侧边栏的方法呢？

Answer 1

如果您在尝试分配该属性时查看应用程序中sidebar.refresh的值，您将看到如下所示：

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

模板组件是通过生成带有指向方法的引用的代理来延迟加载的，因此您只是将一个引用传递给代理。解决这个问题的最简单的方法是创建一个显式调用该方法的函数，强制其水合。(如果源组件还没有水合，您需要首先使用它的生命周期方法等待。)

这是你的应用程序中的样子：

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

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

您也可以在popup组件中执行此操作：

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

如果以这种方式从另一个组件内部调用该方法，您可能会看到TypeScript错误Property 'refresh' does not exist on type 'Element'.

要避免这种情况，请将侧边栏组件导入到popup组件中：

import { mySidebar } from 'stencil';

然后，使用它作为类型：

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