首页 文章

Angular：不应该显示bootstrap背景

提问于
浏览 次
1

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

起初我希望我的背景和错误模式显示“无” . 当出现错误时，我希望弹出背景错误模式 . 我可以在加载网页时隐藏模态，但不幸的是背景没有隐藏（有深灰色背景，我甚至无法点击它使其消失 . 有人能看到原因吗？模态和背景元素两者都有相同的'[ngStyle] =“{'display'：display}”'链接到错误组件属性 .

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 -->
javascript angular twitter-bootstrap

2 回答

  • 1

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

    回复于
  • 2

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

    不需要自定义CSS .

    回复于

相关问题