Ember JS: вызов действия компонента из другого компонента - PullRequest
Новая
       8

Ember JS: вызов действия компонента из другого компонента

0 голосов
/ 01 февраля 2020

Я новичок в ember JS и после просмотра do c я все еще не представляю или не понимаю, как добиться следующего.

У меня есть компонент navbar, который включает в себя компонент кнопки меню 

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

Большое спасибо.

1 Ответ

1 голос
/ 03 февраля 2020

Решение здесь состоит в том, чтобы переместить состояние и действие к общему предку.

Кажется, у вас есть 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}}

Таким образом, вы видите, что решение всегда держать государство в нужном месте. Если несколько компонентов совместно используют состояние (потому что один изменяет его, а другой читает его), это состояние не принадлежит ни одному из компонентов, а является общим компонентом-предком.

...