Angular 5中使用ngIf控制多应用实例搜索栏显隐的问题

• 两套代码的显示判断逻辑没有做跨实例兼容，第二个实例的判断条件zipcodePlaceholder !== undefined在第一个实例中默认返回false，所以直接使用第二段代码会导致第一个实例的搜索栏被强制隐藏
• 你当前用的是两套互斥的独立逻辑，没有合并为适配双场景的统一判断

把两个实例的显示条件做逻辑合并，优先判断当前运行的是哪个实例场景，再走对应场景的显示判断：

• 当zipcodePlaceholder为undefined时，判定为第一个实例场景，走原有的!browseMyState判断逻辑
• 当zipcodePlaceholder不为undefined时，判定为第二个实例场景，走zipcodePlaceholder !== undefined的判断逻辑

合并后的代码如下：

<div *ngIf="(zipcodePlaceholder === undefined && !browseMyState) || zipcodePlaceholder !== undefined" class="form-control form-control__search-bar">
    <label for="" [innerHTML]="settings.locationLabel || settings.zipcodeLabel"></label>
    <input type="text" [ngClass]="{'locationError': showLocationError }" name="location" aria-label="Enter Location" [placeholder]="settings.locationPlaceholder || settings.zipcodePlaceholder" [(ngModel)]="locationValue" (change)="onLocationChange($event)">
    <div *ngIf="showEmptyLocationError !== undefined" class="locationErrorValue" [ngClass]="{'visible': showLocationError }">Please enter a valid location</div>
</div>

如果你的两个实例有明确的标识变量（比如instanceType），也可以用更清晰的判断写法：

<!-- 假设instanceType为1是第一个实例，为2是第二个实例 -->
<div *ngIf="(instanceType === 1 && !browseMyState) || (instanceType === 2 && zipcodePlaceholder !== undefined)" class="form-control form-control__search-bar">
    <!-- 内部代码不变 -->
</div>

内容的提问来源于stack exchange，提问作者areno113