angular - 带有默认模板的 Angular 地图

Question

我正在使用AngularMaps创建地图组件

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <ng-container *ngIf="!isCreating">
      <agm-marker color="Blue" *ngFor="let locationGroup of locationEntitiesMap" (markerClick)="clickedMarker(locationGroup)" 
        [latitude]="locationGroup?.location?.latitude" [longitude]="locationGroup?.location?.longitude">

        <agm-snazzy-info-window [maxWidth]="200" [closeWhenOthersOpen]="true">
            <ng-template [ngTemplateOutlet]="options.template || defaultTemplate" [ngTemplateOutletContext]="{group: locationGroup}">
            </ng-template>
            <ng-template #defaultTemplate let-group="group">
              <div>XJ543sB</div>  
              <ng-container *ngFor="let data of group.data">
                  <ion-label>Location: </ion-label>
                  <ion-label>{{group.location.name}} </ion-label>
                  <ion-button (click)="selectLocation(group.location, data)">
                    {{options.selectLabel}}
                  </ion-button>
              </ng-container>
            </ng-template>
        </agm-snazzy-info-window>
      </agm-marker>
  </ng-container>
    <agm-marker *ngIf="isCreating" [latitude]="latitude" [longitude]="longitude" [markerDraggable]="true"
      (dragEnd)="markerDragEnd($event)">
    </agm-marker>
</agm-map>

我检查了 dom 并验证了模板实际上是用 TemplateOutletContext 填充的，但是由于某种原因它总是呈现空白

我在这里的StackBlitz中创建了一个简化版本来表示问题，我正在尝试使用 [TemplateOutlet] 引用默认模板，但没有渲染

标签： angularionic-framework

Answer 1

您应该首先创建简单ng-template，然后在您想要的任何内容中渲染：

<my-info-window [offset]="offset">
  <ng-template>
    <ng-template [ngTemplateOutlet]="defaultTemplate"></ng-template>
  </ng-template>

  <ng-template #defaultTemplate>
    Phoenix
  </ng-template>

</my-info-window>

分叉的 Stackblitz