Question

在Angular中，仍然可以删除父元素而不删除其子元素。我知道有几种方法可以使用jQuery，但是我宁愿不使用jQuery。

以下是详细信息：我有一个列表，我想根据屏幕大小在下拉菜单或面包屑之间进行切换。 li元素本质上是相同的，只是需要将其父ul换出。目前，我可以在两者之间切换，但是我正在寻找一种方法，以不重复使用li元素来减少代码的重复性。

下拉父级：

<ul *dropdownMenu class="dropdown-menu">

面包屑父母：

<ul class="custom-breadcrumb nav nav-fill"

通常，我只使用[className] = ...之类的东西有条件地换出这些类。但是由于我正在与ngx-bootstrap一起使用*dropdownMenu来执行下拉菜单，因此我需要换出who ul元素。

到目前为止，我尝试过的所有操作都删除了父ul和子li元素。

预先感谢您的帮助

Answer 1

您可以使用ngIf ... else指令来选择在视图中显示哪个父元素。为避免对列表项重复标记，请将其放在ng-template中，并使用ngTemplateOutlet指令将该模板插入父项。

<ul *ngIf="condition else dropdown" class="custom-breadcrumb nav nav-fill">
  <ng-container *ngTemplateOutlet="listItems"></ng-container>
</ul>
<ng-template #dropdown>
  <ul *dropdownMenu class="dropdown-menu">
    <ng-container *ngTemplateOutlet="listItems"></ng-container>
  </ul>
</ng-template>
<ng-template #listItems>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ng-template>

有关演示，请参见this stackblitz。

角度删除父元素而不影响子元素

1 个答案: