трафарет js: проблема со слотом - PullRequest
Новая
       70

трафарет js: проблема со слотом

0 голосов
/ 26 апреля 2020

Я создал простой веб-(трафаретный) компонент AuthGuard, его не следует путать с AuthGuard Angular.

Цель этого компонента - проверить, вошел ли пользователь в систему. .

  • Если да, выполните рендеринг слота html.
  • Если нет, выполните визуализацию кнопки регистрации.

Код компонента выглядит следующим образом: 

import { Component, Host, h }   from    '@stencil/core';
import { Build, State       }   from    '@stencil/core';

import { AuthService        }   from    'auth/auth.service';
import { ConfigService      }   from    'common/config.service';

@Component({
    tag                         :   'auth-guard',
    styleUrl                    :   'auth-guard.css',
    shadow                      :   true,
})
export class AuthGuard {

    @State() canRender          :   boolean             =   false;

    componentWillLoad() {
        if (Build.isBrowser) {
            const timerId       =   setInterval(() => {
                if (AuthService.isInitialized) {
                    AuthService.vol$.subscribe(_u => {
                        this.canRender= true;
                    });
                    clearInterval(timerId);
                }
            }, ConfigService.loadTime);
        }
    }

    render() {
        console.log('auth guard :: render', this.canRender, AuthService.me);
        return (
            <Host>
                { 
                    this.canRender ? (
                        AuthService.me && AuthService.me.id.length > 0 ? (
                            <slot></slot>
                        ) : (
                            <ion-button
                                href="/signup"
                                routerDirection="forward"
                                color="danger">
                                Signup
                            </ion-button>
                        )
                    ): null
                }
            </Host>
        );
    }

}

Теперь в другом файле я использую следующий код: 

<auth-guard slot='end'>
    <volunteer-mini volunteer={AuthService.me}></volunteer-mini>
</auth-guard>

С этим я ожидаю, что

  • Ничего не будет отображено до тех пор, пока this.canRender не станет истинным.
  • Как только this.canRender станет истинным, если AuthService.me действителен, визуализировать слот HTML,
  • Если AuthService.me имеет значение null, выполнить регистрацию button.

Но кажется, что this.canRender имеет значение false, он пытался отобразить volunteer-mini слот HTML, что является проблемой. Поскольку volunteer-mini внутренне зависит от AuthService.me, который еще не инициализирован.

Но как только this.canRender становится истинным, другие 2 сценария ios работают нормально.

1 Ответ

2 голосов
/ 26 апреля 2020

В общем случае плохая идея написать аутентификацию с использованием трафарета. Основная проблема заключается в том, что ваш слот существует до инициализации компонента.

Поэтому, используя ваш текущий код, вам придется вручную удалить слот после того, как вы решили, что у вас нет прав.

Кроме того, если вы не определяете положение слота, но по-прежнему предоставляете контент слота в своем родителе, он все равно будет добавлен к вашим внутренним дочерним элементам.

Чтобы решить эту проблему, вы можете выполнить рефакторинг Ваш компонент в функции, например <Host>, но здесь есть и другие недостатки.

...