Question

我在一个组件下面有一个模态，当你点击一个按钮时会显示它。我想知道的是，是否有办法查看该组件是否实际显示在屏幕上。

在我的例子中，我有一个boostrap 4模式，当我点击时会显示理论上我应该能够确定类“show”是否存在或现在是否在具有实际模态的组件内。话说回来。为了实现这一点，我正在实现AfterViewChecked钩子，但当我单击父组件来切换模态时，它仍然没有更新页面，并且类“show”由于某种原因不在classList中（或者我我做错了什么。）

关于这一点的奇怪之处在于，如果我打印classList，我就有了这个：

["modal", value: "modal"]
length
:
2
value
:
"modal show"
0
:
"modal"
1
:
"show"

我之后立即执行：element.classList.contains("show")并返回false！

还有其他方法可以从打字稿组件中获取模态的状态吗？

更新：

AfterViewChecked实施：

public ngAfterViewChecked(): void {
        const modalElement = document.getElementById("imageModal");

        console.log(modalElement.classList);

        console.log(modalElement.classList.contains("show"));
    }

HTML：

<div class="modal" id="imageModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center modal-size" role="document">
            <div data-dismiss="modal">
                <img class="modal-content" [src]="image">
            </div>
        </div>
    </div>
</div>

更新：

<div class="carousel-inner" role="listbox">
            <div *ngFor="let image of project.images, let i = index" class="carousel-item" [ngClass]="{'active' : i == 0}">
                <img data-toggle="modal" data-target="#imageModal" (click)="zoom(image)" [src]="image">
            </div>
        </div>

模态位于该组件模板HTML上的轮播之后：

<modal-image [image]="selectedImage"></modal-image>

其中zoom(image)：

public zoom(image: string) {
        this.selectedImage = image;
    }

检查组件内容是否可见Typescript - Angular4

0 个答案: