StencilJS 检查命名槽是否为空 [英] StencilJS check if named slot is empty
本文介绍了StencilJS 检查命名槽是否为空的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个带有两个命名槽的 stencilJS 组件.有没有办法确定插槽是否已分配值?例如,下面的代码片段显示了logo"和菜单"的命名槽.如果两个命名槽都不为空,我如何检查组件内部?理想情况下,我想从组件内部和 componentWillMount() 期间进行检查.谢谢你.
I have a stencilJS component with two named slots. Is there a way to determine if the slots have been assigned values? For instance, the code snippet below show named slots for "logo" and "menu." How can I check inside the component if both named slots are not empty? Ideally I want to check from inside the component and during componentWillMount() . Thank you.
<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() 函数中的宿主元素检测槽的使用:
The use of a slot can be detected from the host element in the componentWillLoad() function:
hasLogoSlot: boolean;
hasMenuSlot: boolean;
@Element() hostElement: HTMLStencilElement;
componentWillLoad() {
this.hasLogoSlot = !!this.hostElement.querySelector('[slot="logo"]');
this.hasMenuSlot = !!this.hostElement.querySelector('[slot="menu"]');
}
这篇关于StencilJS 检查命名槽是否为空的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文