样式自定义面板菜单标签

Question

我有下面的代码

this.menu=[
  {
    label: LabelGenerator.getLabelHTML('Home', false),
    escape:false
  }
];

export class LabelGenerator{
  static getLabelHTML(name: string, showArrow: boolean): string{
    return `<div class="p-d-flex p-ai-center sideMenuListTitle">
      <div>
        <span>2</span>
        </div>
        <div class="p-ml-2">${name}</div>
        <div></div>
      </div>`;
  }
}

    .sideMenuListTitle span{
  height: 30px;
  width: 30px;
  background-color: #616161;
}

问题是 .sideMenuListTitle span 样式不适用于我的标签。

如果我直接在 getLabelHTML 中包含此样式，则 Angular 表示 sanitizing HTML stripped some content

Answer 1

在组件中设置动态 HTML 样式时，您需要考虑 ViewEncapsulation 。最简单的解决方案是将您的样式移动到全局样式（styles.scss 如果您使用 SASS）或在组件样式中使用 ng-deep 包装您的样式：

::ng-deep {
  pass your styles here
}

样式自定义面板菜单标签

Styling custom panelmenu label

primeng

angular