Angular中使用基于LitElement的Astrouxds的rux-tabs组件异常如何解决

问题相关截图 #

• 异常展示效果：
  
• 现有引入文件：
  

核心失效原因 #

你的代码存在两处直接导致组件无法运行的问题：

• ARIA关联属性拼写错误：rux-tab-panels和rux-tab-panel的关联属性误写为aria-labeledby，正确属性名为aria-labelledby，拼写错误会直接打断组件内部标签和面板的联动逻辑。
• 布尔属性传递不符合Angular规范：自定义Web组件的无值布尔属性（如compact、transparent）在Angular中需要显式赋值，否则属性不会被正确传递给组件。

修复步骤 #

1 修正模板代码 #

修改后的HTML代码如下：

<main class="grid-zone grid-zone--main">
    <div class="grid-zone__content">
        <div class="grid-zone--main__subheader main__tabs">
            <div class="rux-form-field-div-search">
                <div class="rux-form-field search">
                    <input class="rux-form-field__text-input search" placeholder="Search …" type="search" />
                </div>
            </div>
            <!-- 布尔属性显式赋值 -->
            <rux-tabs [compact]="true" id="mainTabs" [transparent]="true" class="rux-tabs">
                <rux-tab class="secondary-toolbar__tabs__tab" id="t0" role="tab">Tab1</rux-tab>
                <rux-tab class="secondary-toolbar__tabs__tab" id="t1" role="tab">Tab2</rux-tab>
            </rux-tabs>
        </div>
        <!-- 修正aria-labelledby拼写 -->
        <rux-tab-panels aria-labelledby="mainTabs" class="grid-zone grid-zone--main__content">
            <!-- 修正aria-labelledby拼写 -->
            <rux-tab-panel aria-labelledby="t0" role="tabpanel">
                <div>Tab1 content</div>
            </rux-tab-panel>
            <rux-tab-panel aria-labelledby="t1" role="tabpanel">
                <div>Tab2 content</div>
            </rux-tab-panel>
        </rux-tab-panels>
    </div>
</main>

2 确认配置与引入完整性 #

• 检查使用该组件的对应模块文件，确认schemas数组中已添加CUSTOM_ELEMENTS_SCHEMA，让Angular可以识别自定义Web组件：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [/* 你的业务组件 */],
  imports: [/* 项目依赖模块 */],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourModule { }

• 确认rux-tab、rux-tab-panels、rux-tab-panel三个依赖子组件的JS文件都已完整引入，缺失任意子组件都会导致整体功能失效。

3 可选：监听标签切换事件 #

如果需要捕获标签切换动作，可绑定rux-tabs的rux-selected事件：

<rux-tabs [compact]="true" id="mainTabs" [transparent]="true" (rux-selected)="handleTabChange($event)">

在组件逻辑中接收事件：

handleTabChange(event: CustomEvent) {
  // event.detail中包含当前选中tab的索引、id等信息
  console.log('选中tab信息', event.detail);
}

内容的提问来源于stack exchange，提问作者stackalreadyoverflowed