stenciljs：插槽问题答案

【问题标题】：stenciljs: Issue with slotstenciljs：插槽问题
【发布时间】：2020-04-26 17:07:54
【问题描述】：

我创建了一个简单的 Web（模板）组件 AuthGuard，不要与 Angular 的 AuthGuard 混淆。

这个组件的目的是检查用户是否登录。

如果是，则呈现插槽 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 变为 true，如果 AuthService.me 有效，则渲染槽 HTML，
如果 AuthService.me 为 null，则呈现注册按钮。

但似乎当 this.canRender 为 false 时，它试图渲染 volunteer-mini 插槽 HTML，这是一个问题。由于volunteer-mini 内部依赖于尚未初始化的AuthService.me。

但是一旦 this.canRender 变为真，其他 2 个场景都可以正常工作。

【问题讨论】：

标签： web-component stenciljs

【解决方案1】：

一般来说，使用模板编写 auth-guard 是个坏主意。核心问题是你的 slot 在你的组件初始化之前就已经存在了。

因此，使用您当前的代码，您必须在确定您没有权限后手动删除该插槽。

另外，如果你没有定义一个 slot 位置，但仍然在你的 parent 中提供一个 slot-content，它仍然会附加到你的内部子项。

要解决这个问题，你可以将你的组件重构为一个函数，比如<Host>，但这还有其他坑要考虑。

【讨论】：