Stencil：通過 DOM 從另一個組件調用公共方法

Question

我有一個帶有refresh()方法的 Stencil 側邊欄組件。 我用@Method()暴露了它：

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

我可以從我的應用程序中調用它：

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

但是，我還有一個彈出組件，它是由應用程序通過單獨的 API 臨時生成的，我想在彈出窗口中創建一個按鈕來觸發側邊欄的refresh() 。 我已將該方法設置為彈出窗口中的Prop ：

@Prop() refresh: Function;

並且我在應用程序代碼中設置了 Prop 作為對該方法的引用：

popup.refresh = sidebar.refresh;

...但是當我嘗試執行它時，我得到一個錯誤：

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

如何讓彈出窗口查看側邊欄的方法？

Answer 1

如果您在嘗試分配該 Prop 時查看應用程序中sidebar.refresh的值，您會看到如下內容：

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

Stencil 組件通過生成帶有指向方法的引用的代理來延遲加載，因此您只需將引用傳遞給代理。 解決此問題的最簡單方法是創建一個 function 顯式調用該方法，強制其水合。 （如果源組件尚未水合，則需要先使用其生命周期方法等待。）

這是您的應用程序中的樣子：

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

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

您也可以在彈出組件中執行此操作：

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

如果以這種方式從另一個組件內部調用該方法，您可能會看到 TypeScript 錯誤Property 'refresh' does not exist on type 'Element'.

為避免這種情況，請將側邊欄組件導入您的彈出組件：

import { mySidebar } from 'stencil';

然后，將其用作類型：

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