如何将属性添加到 PrimeNG 的 slidemenu backlabel 属性？

Question

将 PrimeNG 用于本机 Angular UI 组件，有一个名为 "slidemenu" 的菜单，其中有一个名为 "backLabel" 的有用属性。属性最终创建了一个按钮，用于导航回上一个视图。但是，在页面中使用 tab 键时会跳过生成的后退按钮。

我的想法是将 "tabindex" 属性添加到元素，但是，我想不出一个方法来做到这一点，我没有在 primeNG 上看到任何说明如何操作的文档。

angular 组件如下所示：

<p-slideMenu backLabel="Back" [model]="items" [menuWidth]="337"></p-slideMenu>

生成后如下所示： <span class="ng-classname">Back</span>

我知道我可以使用 span.ng-classname 作为选择器来访问 css，但无论如何我都看不到向元素添加属性。

Answer 1

您需要在对您的 p-slideMenu 组件的引用上使用 renderer2，然后访问向后的 ElementRef：

<p-slideMenu #myMenu></p-slideMenu>

然后，在包含幻灯片菜单的组件上：

import { ViewChild } from '@angular/core';
import { SlideMenu } from 'primeng/slidemenu';

// (somewhere in your code where is needed)
//...
@ViewChild('myMenu') slider: SlideMenu;
//...
this.slider.renderer.setAttribute(this.slider.backward.nativeElement, 'tabindex', '1');

这样你就可以在slidemenu的向后控件上设置tabindex属性了。您应该在适当的时间包含它（即当滑块完全显示时）。您可能需要执行一些清理操作（例如销毁等）。取决于您对代码的预期行为等

如何将属性添加到 PrimeNG 的 slidemenu backlabel 属性？

How to add attributes to PrimeNG's slidemenu backlabel property?

primeng

angular