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

---

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