Angular中Bootstrap遮罩层异常显示问题排查求助

嘿，我一眼就发现问题所在啦！你遇到的遮罩层无法隐藏的问题，根源是变量名拼写不一致，导致绑定的样式根本没生效。

具体问题点 #

对比你的代码就能看出问题：

• 在error.component.ts里，你定义的控制显示状态的变量是 displayed = 'none'
• 但在模板error.component.html里，你绑定的却是 [ngStyle]="{'display': display}"

这里变量名一个是displayed，一个是display，完全不匹配！初始状态下，模板里的display变量是undefined，ngStyle相当于没设置display属性，而遮罩层的CSS没有默认的display: none，所以它会一直显示在页面上，自然无法点击消失。

修复步骤 #

很简单，把变量名统一就行，二选一：

方案1：修改组件里的变量名

把error.component.ts里的变量改成display，和模板保持一致：

// error.component.ts
export class ErrorComponent implements OnInit {
 error: Error;
 display = 'none' // 这里把displayed改为display
 constructor(private errorService: ErrorService) { }

 onErrorHandled() {
 this.display = 'none' // 这里原本就是display，无需修改
 }

 ngOnInit() {
 this.errorService.errorOccurred.subscribe(
 (error: Error) => {
 this.error = error;
 this.display = 'block'; // 这里保持display
 }
 );
 }
}

方案2：修改模板里的绑定变量

如果不想改动组件，就把模板里的display换成displayed：

<!-- error.component.html -->
<div class="backdrop" [ngStyle]="{'display': displayed}"></div>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': displayed}">
  <!-- 其余内容保持不变 -->
</div>

别忘了同步修改onErrorHandled方法里的变量名：

onErrorHandled() {
 this.displayed = 'none'
}

额外优化建议 #

其实用字符串控制display不是Angular里最优雅的方式，你可以用布尔值来控制，代码可读性更高：

1. 组件里定义状态变量：isErrorVisible = false
2. 模板里通过三元表达式绑定样式：

<div class="backdrop" [ngStyle]="{'display': isErrorVisible ? 'block' : 'none'}"></div>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': isErrorVisible ? 'block' : 'none'}">
  <!-- 模态框内容 -->
</div>

3. 触发错误和关闭时切换布尔值：

ngOnInit() {
 this.errorService.errorOccurred.subscribe(
 (error: Error) => {
 this.error = error;
 this.isErrorVisible = true;
 }
 );
}

onErrorHandled() {
 this.isErrorVisible = false;
}

甚至可以用*ngIf直接添加/移除元素，初始时元素根本不会渲染，更省性能：

<div class="backdrop" *ngIf="isErrorVisible"></div>
<div class="modal" tabindex="-1" role="dialog" *ngIf="isErrorVisible">
  <!-- 模态框内容 -->
</div>

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