stenciljs:发行插槽

Question

我已经创建了一个简单的网页(模板)组件AuthGuard，不要被混淆与角的AuthGuard。

此组件的目的是检查用户是否已登录。

如果是

• ，则呈现槽html。
• 如果没有，则呈现Signup按钮。

。

组件代码如下：

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为空，则呈现
• ，再呈现注册按钮。

但是，当this.canRender为false时，它试图将volunteer-mini呈现为槽HTML，这是一个问题。因为volunteer-mini在内部依赖于尚未初始化的AuthService.me。

但是一旦this.canRender成为现实，其他两种方案就可以正常工作了。

Answer 1

一般来说，用模具写护栏是个坏主意。核心问题是，在组件初始化之前就存在插槽。

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

此外，如果您没有定义插槽位置，但仍然在您的父级中提供插槽内容，则它仍将被附加到您的内部子项中。

要解决这个问题，可以将组件重构为像<Host>这样的函数，但这还需要考虑其他问题。