angular9判断模态内容是不是渲染完成
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular9判断模态内容是不是渲染完成相关的知识,希望对你有一定的参考价值。
参考技术A 用结合使用的时候,在完后,执行一段js脚本,把应用到该上,能够捕获到渲染完成页面的事件。1、达到这个目的,需要为当前的app自定义。
2、然后,在需要监控的地方,加上该。
3、最后,补充上需要render完成之后的Js脚本。
dom完成渲染后Angular2执行操作
【中文标题】dom完成渲染后Angular2执行操作【英文标题】:Angular2 do actions after dom has finished rendering 【发布时间】:2019-04-27 21:25:31 【问题描述】:我在页面上有一个大型 ngx-bootstrap 手风琴。当我打开一些较低的手风琴时,我希望它滚动页面,以便打开的手风琴从窗口顶部开始。我用scrollIntoView实现了滚动部分,但现在的问题是在正确的时间执行它。我目前在 ngAfterViewChecked 中执行此操作,但 viewChecked 被多次触发(mousemove、mouseenter 等)。有没有办法仅在 DOM 完成与 angular2+ changeDetection 分开渲染后才触发一段代码?
解决方案
这是开始起作用的解决方案。
constructor(elementRef: ElementRef)
this.elementRef = elementRef
getData()
this.getService().then(result =>
#do stuff with result
setTimeout(() => this.scrollToBegin());
).catch((err: any) =>
);
scrollToBegin(): any
this.elementRef.nativeElement.scrollIntoView();
【问题讨论】:
ngOnInit
钩子有什么问题。在显示所有绑定后触发它。更重要的是,它会被触发一次。
但是每次打开手风琴时我都需要触发它。当我打开页面时,所有 ngOnInits 都已完成。之后不再调用它。
【参考方案1】:
查看 Angular 文档以了解不同的生命周期挂钩。组件视图初始化后调用生命周期钩子。
AfterViewInit()
将根据您的要求执行一次。
在 Angular 完成后立即调用的回调方法 完成了组件视图的初始化。它只被调用 视图实例化时一次。
ngAfterVIewChecked()
在组件视图加载后调用,但它会检测到更改并执行。
【讨论】:
【参考方案2】:AFAIK 你只有 ngAfterViewChecked
和 ngAfterViewInit
来检测 dom 更新。
根据我的经验,有时您需要在 settimeout
中编写用于 dom 更改的代码,以便为此安排宏任务(异步更新),以便您的代码将在下一个更改检测周期中运行(这正是你需要)。更多详情见this article
将您的罐头放在块代码末尾的settimeout
中(并将其从ngAfterViewChecked
中删除)。
一些例子:
setTimeout(() => htmlInputElement.focus()); // focus an input
setTimeout(() => htmlElement.scrollIntoView()); // scroll into view
【讨论】:
当我把它放在 afterViewChecked 里面时它没有工作。但是,如果我将它作为 AJAX 所做的最后一件事添加,它就开始起作用了。 @MarkoTaht 你做对了。我编辑了我的答案以澄清这一点。【参考方案3】:这是一个愚蠢的回应。但是您是否考虑过使用随手风琴提供的自定义事件isOpenChange
:
<accordion-group heading="Group with isOpenChange event listener"
(isOpenChange)="log($event)">
<p>Some content</p>
</accordion-group>
然后在对方:
log(event: boolean)
console.log(`Accordion has been $event ? 'opened' : 'closed'`);
【讨论】:
我已经在使用它了。 isOpenChange 调用从服务器获取数据的 ajax 调用。我尝试在 ajax 结束时调用 scrollIntoView 事件,但它不起作用,因为它现在正在执行 DOM 更新。 好的。所以这是一个时间问题。你调用了 http 端点并且你想在调用返回时执行一些操作? 来自端点的数据创建一个大表。因此,如果手风琴是列表中的最后一个,您需要手动滚动才能查看内容,如果它会自动在列表中居中会很好。 vmoh_ir 的答案是我正在寻找的解决方案。 这不是解决方案,而是解决方法。调用 set timeout 是实现您想要的非确定性方式。我想找到一个真正的解决方案。因为我将来可能会遇到这个问题。 您能否发布完整的解决方案。现在编写的代码。以上是关于angular9判断模态内容是不是渲染完成的主要内容,如果未能解决你的问题,请参考以下文章