Angular删除父元素而不影响子元素

Question

在Angular中，无论如何都要移除父元素而不删除它的子元素。我知道有几种方法可以用jQuery做到这一点，但我宁愿不使用jQuery。

以下是具体内容：我有一个列表，我希望根据屏幕大小在下拉列表或面包屑之间切换。 li元素基本上是相同的，只是它们的父uls需要被换出。目前我能够在两者之间切换，但我正在寻找一种方法来不重复我的li元素来减少我的代码的重复性。

下拉父母：

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

面包屑父母：

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

通常我会使用[className] = ...之类的东西来有条件地换掉这些类。但由于*dropdownMenu我正在使用ngx-bootstrap进行下拉工作，我需要换掉who ul元素。

到目前为止，我尝试过的任何内容都会删除父元素和子元素元素。

在此先感谢您的帮助

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。