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}}

所以你看到解决方案是始终将状态保持在正确的位置。如果多个组件共享一个状态（因为一个更改它而另一个读取它），则该状态不属于任何组件，而是属于一个共同的祖先组件。

Ember JS：从另一个组件调用组件动作

Ember JS: Call component action from another component

javascript

ember.js