如何向 PrimeNG 的幻灯片菜单背标属性添加属性？

Question

对原生Angular UI组件使用PrimeNG，有一个名为"slidemenu"的菜单，它有一个有用的属性，称为"backLabel"。该属性最终会创建一个按钮，用于导航回上一个视图。但是，在页面中进行选项卡切换时，会跳过生成的后退按钮。

我的想法是将"tabindex"属性添加到元素中，然而，我想不出实现这一点的方法，我没有看到任何关于primeNG的文档显示如何实现。

角度分量看起来像：

<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属性。您应该在适当的时间(即滑块完全显示时(将其包括在内。您可能需要执行一些清理操作(例如销毁等(。取决于您对代码的预期行为等。