ember.js Ember JS：从另一个组件调用组件操作

6g8kf2rb 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(171)

我是一个新的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
   }
}

我不知道在点击按钮时如何调用X1M0N1X操作，我想我错过了一些东西...
组件的封装方式如下

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

谢谢你，谢谢你

ember.js

来源：https://stackoverflow.com/questions/60012729/ember-js-call-component-action-from-another-component

1条答案

按热度按时间

ql3eal8s1#

这里的解决方案是将状态和动作移动到公共祖先。
看起来你有三个组成部分：

nav-bar
nav-bar个
nav-aside

其中，navbar基本上封装了nav-bar和nav-aside：
所以在navbar中基本上是这样：

<NavBar />
<NavAside />

在nav-bar中有一个按钮，如果nav-aside中的内容显示出来，这个按钮就会切换。

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

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

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js Ember JS：从另一个组件调用组件操作

1条答案

相关问题

热门标签

最新问答