1

我正在使用引导程序和角度，并制作一个包含菜单的组件。

如果屏幕大，我希望他在导航栏中，但如果屏幕小，我希望它在下拉菜单中。

我目前有这个：

<div class="d-flex justify-content-between flex-md-nowrap align-items-center">
  <div class="col-5 col-md-2 p-0 p-md-auto">
    <span class="h4 my-0 mx-2 align-middle">{{ title }}</span>
  </div>
  <div class="col-7 col-md-10 float-right">

    <!-- DEFAULT VIEW -->
    <ng-content></ng-content>

    <!-- SMALL VIEW -->
    <div ngbDropdown class="d-md-none d-inline-block">
      <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <ng-content></ng-content>
      </div>
    </div>
  </div>
</div>

问题是，ng-content 只出现一次，而且它在下拉列表中。有没有办法让它在两种情况下都出现，或者切换它？

当默认视图显示为无/块时，我正在考虑切换布尔值

编辑：我试过这个，但它也不起作用。

  <div class="col-7 col-md-10 float-right">
    <div #default class="d-none d-md-block">
      <div *ngIf="default.offsetWidth > 0">
        <ng-content></ng-content>
      </div>
    </div>

    <div ngbDropdown class="d-md-none d-block">
      <button class="btn btn-outline-primary float-right" id="filters" ngbDropdownToggle>
        {{ 'BUTTON.FILTER' | translate }}
      </button>
      <div ngbDropdownMenu aria-labelledby="filters">
        <div *ngIf="default.offsetWidth === 0">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  </div>
4

1 回答 1

1

复制https://stackoverflow.com/a/44699654/390161

您可以将 ng-content 包装在 ng-template 中并使用 ngTemplateOutlet

<a class="bouton" href="{{ href }}" *ngIf="hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
</a>

<button class="bouton" *ngIf="!hasURL">
    <ng-container *ngTemplateOutlet="contentTpl"></ng-container> 
</button>
<ng-template #contentTpl><ng-content></ng-content></ng-template>
于 2020-05-15T10:14:18.833 回答