Как вы можете изменить состояние в веб-компоненте таким образом, чтобы его можно было интерпретировать историей с помощью vaadin-router? - PullRequest
Новая
       86

Как вы можете изменить состояние в веб-компоненте таким образом, чтобы его можно было интерпретировать историей с помощью vaadin-router?

2 голосов
/ 27 мая 2020

У меня есть довольно простой пользовательский компонент LitElement, для которого я хочу иметь состояние «редактирования». Поскольку у меня уже есть вся информация с сервера, я не хочу загружать новый компонент только для того, чтобы показать экран редактирования или перезагрузить текущий компонент, но я do хочу сделать это так что пользователь, нажимающий кнопку «Назад», выходит из состояния редактирования. Я не уверен, как это сделать.

Простой пример: 

@customElement('my-element')
class MyElement extends LitElement {

  @property({ attribute: false }) private _editing = false;
  @property({ attribute: false }) private _data!: Data;

  public connectedCallback() {
    super.connectedCallback();
    // Loading stuff..
  }

  public render() {
    return this._editing
      ? html`
          <editing-control .data=${this._data}></editing-control>
        `
      : html`
          <details-control .data=${this._data}></details-control>
          <button @click=${this._onEditClick}>Edit</button>
        `;
  }

  private _onEditClick(e: Event) {
    this._editing = true;
  }
}

Примечание. Я использую маршрутизатор Vaadin для маршрутизации, и следующие подходы имеют проблемы

  • Добавление кнопки редактирования #editing к URL-адресу (путем использования ссылки или изменения местоположения с помощью Route.go или window.location.href) заставляет маршрутизатор повторно подключать компонент, вызывая повторное подключение. -загрузка данных и сброс состояния
  • Попытка прослушать 'popstate', я получаю уведомление после vaadin-router, поэтому он переходит в предыдущее местоположение, прежде чем я смогу изменить его поведение
  • используя onBeforeLeave, я не могу различить guish между попыткой go назад и законным запросом go сделать другую страницу из меню

1 Ответ

2 голосов
/ 28 мая 2020

Я полагаю, у вас есть что-то вроде этого в конфигурации ваших маршрутов 

{
  path: '/foo',
  component: 'my-foo-component'
}

Вы должны изменить его и использовать action вместо component, в действии вам нужно вернуть тот же экземпляр компонент 

my fooElement = document.createElement('my-foo-component');
....

{
  path: '/foo',
  action: () => fooElement;
}
...