web-component - StencilJS 检查命名槽是否为空
问题描述
我有一个带有两个命名插槽的 stencilJS 组件。有没有办法确定插槽是否已分配值?例如,下面的代码片段显示了“ logo ”和“ menu ”的命名槽。如果两个命名插槽都不为空,如何检查组件内部?理想情况下,我想从组件内部和在 componentWillMount() 期间进行检查。谢谢你。
<koi-menu breakpoint="768" userToggled="false">
<div class="logo__header " slot="logo"><img src="assets/images/logo.png" /></div>
<ul class="nav__wrapper list mw8-ns center-m" slot="menu">
<li class="nav__listitem"><a class="ttu nav__link" href="???">Why Live Grit</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Clients</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Programs</a></li>
<li class="nav__listitem"><a class="ttu nav__link" href="???">Our Story</a></li>
</ul>
</koi-menu>
解决方案
可以从 componentWillLoad() 函数中的宿主元素中检测到插槽的使用:
hasLogoSlot: boolean;
hasMenuSlot: boolean;
@Element() hostElement: HTMLStencilElement;
componentWillLoad() {
this.hasLogoSlot = !!this.hostElement.querySelector('[slot="logo"]');
this.hasMenuSlot = !!this.hostElement.querySelector('[slot="menu"]');
}
推荐阅读
- android - ionic cordova run android 在上次更新后停止工作
- ios - UILabel 中的 Int 未达到 11
- javascript - requestFullscreen 在三星移动默认浏览器中无法正常工作
- spring - 如何修复'java.lang.NoClassDefFoundError:org/apache/tinkerpop/gremlin/process/traversal/dsl/graph/GraphTraversalSource$GraphTraversalSourceStub'?
- ansible - with_items 之间的迁移到循环
- postgresql - 如何使用 psql 恢复具有关系的数据库?
- vb.net - 如何在richtextbox中立即将键从大写转换为小写?
- angular - 如何将 Angular 8 模块发布到 NPM
- swift - 使用泛型创建结构数组
- amazon-web-services - EC2 实例 Web 访问 ERR_CONNECTION_REFUSED 错误。HTTP 端口已打开