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 が 1 回しか表示されず、ドロップダウンにあることです。両方の場合に表示する方法、または切り替える方法はありますか?

デフォルトのビューが表示されない/ブロックになったときにブール値を切り替えることを考えていました

編集：これを試しましたが、うまくいきません。

  <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 に答える