Question

有时我想在组件中重用一些视图（HTML代码）（但不会创建新组件）。像这样的事情：

<div *ngIf="Fordestop">
    <div class="divdesktop"></div>
    #insert-my-reuse-div-here
</div>

<div *ngIf="ForMobile">
    <div class="divmobile"></div>
    #insert-my-reuse-div-here
</div>

<ng-template #my-reuse-div>
<!--My reuse view-->
</ng-template>

我怎么能在Angular中做到这一点？

Answer 1

<div *ngIf="Fordestop">
    <div class="divdesktop"></div>
    <template [ngTemplateOutlet]="my-reuse-div"></template>
</div>

<div *ngIf="ForMobile">
    <div class="divmobile"></div>
    <template [ngTemplateOutlet]="my-reuse-div"></template>
</div>

<ng-template #my-reuse-div>
<!--My reuse view-->
</ng-template>

在某些情况下，您还可以使用ngFor。这将需要一个包含每个部分变化的变量的数组。

https://angular.io/api/common/NgForOf

重用组件Angular 2+中的一些视图

1 个答案: