angular 6：在同一个组件中使用相同的 html 标记两次

Question

请参阅下面的示例代码...我想在我的角度组件的 2 个地方使用相同的标记。我怎样才能做到这一点？

我知道我可以注册一个新组件，但这听起来有点过头了。

<div class="mobile-aside" *ngIf="isMobile"><!-- aside template here --></div>
<div class="desktop-aside" *ngIf="!isMobile"><!-- aside template here --></div>

<ng-template #aside>
  <category-aside
    [categoryData]="categoryData"
    [currentParams]="queryParams"
    (filter)="onFilter($event)"
    (changepage)="onPage($event)"
    (sort)="onSort($event)"
    (sortdir)="sortDir($event)"
    (search)="onSearch($event)"
  ></category-aside>
</ng-template>

Answer 1

您可以与 ngTemplateOutlet 指令一起使用，如下所示。

<div class="mobile-aside" *ngIf="isMobile"><ng-container *ngTemplateOutlet="aside"></ng-container></div>
<div class="desktop-aside" *ngIf="!isMobile"><ng-container *ngTemplateOutlet="aside"></ng-container></div>

<ng-template #aside>
  <category-aside
    [categoryData]="categoryData"
    [currentParams]="queryParams"
    (filter)="onFilter($event)"
    (changepage)="onPage($event)"
    (sort)="onSort($event)"
    (sortdir)="sortDir($event)"
    (search)="onSearch($event)"
  ></category-aside>
</ng-template>