Question

所以我在我的应用程序上进行错误处理，我想在出现错误时弹出一个bootstrap模式。

首先，我希望我的背景和错误模式显示“无”＃39;。当出现错误时，我希望弹出背景+错误模式。我可以在加载网页时隐藏模态，但遗憾的是背景并未隐藏（背景为深灰色，我甚至无法点击它以使其消失。有人能看出原因吗？模态和背景元素都具有相同的＆＃39; [ngStyle] =＆＃34; {＆＃39; display＆＃39 ;: display}＆＃34;＆＃39;链接到错误组件属性。< / p>

error.component.ts

import {Component, OnInit} from "@angular/core";
import {ErrorService} from "./error.service";

@Component({
    selector: 'app-error',
    templateUrl: './error.component.html',
    styles: [`
        .backdrop {
            background-color: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
        }
    `]
})

export class ErrorComponent implements OnInit {
    error: Error;
    displayed = 'none'

    constructor(private errorService: ErrorService) {

    }

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

    ngOnInit() {
        this.errorService.errorOccurred.subscribe(
            (error: Error) => {
                this.error = error;
                this.display = 'block';
            }
        );
    }
}

error.component.html

<div class="backdrop" [ngStyle]="{'display': display}"></div>
<div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display': display}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close" (click)="onErrorHandled()"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{ error?.title }}</h4>
            </div>
            <div class="modal-body">
                <p>{{ error?.message }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" (click)="onErrorHandled()">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer 1

也许是因为你有2个变量“显示”和“显示”

Answer 2

使用本机Bootstrap 4类d-none隐藏内容。如果您使用的是Bootstrap 4。

无需自定义CSS。

Angular：不应该显示bootstrap背景

2 个答案: