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

Question

在Angular中，无论如何都可以删除父元素而不删除其子元素。我知道有几种使用jQuery的方法，但是我宁愿不使用jQuery。

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

下拉列表父项：

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

面包屑父母：

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

通常，我只会使用[className] = ...之类的条件替换掉这些类。但是由于*dropdownMenu正与ngx-bootstrap配合使用以使下拉列表正常工作，因此我需要换出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>

有关演示，请参见此堆叠闪电战。