Ember JS：從另一個組件調用組件操作

Question

我是 ember JS 的新手，在瀏覽了文檔后，我仍然不知道或不明白如何實現以下目標。

我有一個包含菜單按鈕組件的導航欄組件

//components/nav-bar.hbs

<nav>
   <LinkTo class="btn-1" @route="contact"><span>Contact</span></LinkTo>
   <LinkTo class="btn-1" @route="about"><span>About</span></LinkTo>
   <MenuButton>Menu</MenuButton>
</nav>

單擊此按鈕時，我想切換另一個組件，該組件既不是菜單按鈕組件的父組件，也不是導航欄組件的子組件

//components/nav-aside.hbs
<div class="core_page_cover">

</div>
<aside class="core_menu_aside">

</aside>


//components/nav-aside.js
import Component from "@glimmer/component";
import { action } from "@ember/object";

export default class NavAsideComponent extends Component {
   @action
   toggle() {
       //toggle expanded | retracted class
   }
}

我不知道點擊按鈕時如何調用toggle動作，我想我錯過了一些東西......

組件是這樣封裝的

// .--------------navbar.hbs--------------    //
// <nav>
//   link link link link link link toggle-button  //
// </nav>
// <MenuAside/>

非常感謝。

Answer 1

這里的解決方案是將狀態和動作移動到共同的祖先。

看來你有3個組成部分：

• navbar
• nav-bar
• nav-aside

基本上navbar封裝了nav-bar和nav-aside ：

所以你的navbar基本上有這個：

<NavBar />
<NavAside />

並且內部nav-bar ，你有一個按鈕，如果里面的東西應該切換nav-aside顯示。 然后解決方案是將該信息保留在包裝navbar組件上：

class NavbarComponent extends Component {
  @tracked showSomethingInAside = false;

  @action
  toggleShowSomethingInAside() {
    this.showSomethingInAside = !this.showSomethingInAside;
  }
}

並像這樣使用它在navbar調用您的組件：

<NavBar @toggleSomethingInAside={{this.toggleShowSomethingInAside}} />
<NavAside @showSomethingInAside={{this.showSomethingInAside}} />

然后在nav-bar您可以使用以下操作：

<button type="button" {{on "click" @toggleSomethingInAside}}>
  show something in aside
</button>

在nav-aside您可以使用布爾值：

{{#if @showSomethingInAside}}
  This can be toggled by the button in the other component
{{/if}}

---

所以你看到解決方案是始終將狀態保持在正確的位置。 如果多個組件共享一個狀態（因為一個更改它而另一個讀取它）該狀態不屬於任何組件，而是屬於一個共同的祖先組件。