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>

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

1 个答案: