jquery datepicker在导航到另一个组件后不起作用

Posted 2023-05-08

【中文标题】jquery datepicker在导航到另一个组件后不起作用

【英文标题】：jquery datepicker is not working after navigation to another component

【发布时间】：2019-05-15 09:33:22

【问题描述】：

我正在使用以下版本， jQuery：^3.3.1 jQuery-UI：1.12.1 角度js 6 所以这是我的代码， .html 有这个定义

<input id="test" type="text" class="form-control"  value="">

在我的组件中（component.ts 文件）

ngOnInit() 
 $('#test').datepicker(
       changeMonth: true,
       changeYear: true,
       yearRange: "1930:2010");

第一次加载页面时，日期选择器会弹出，但导航并返回此页面后，它不会再次弹出。

在浏览器中检查元素后，我发现这个动态的<div> 没有被创建。

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="position: absolute; top: 0px; left: 732.078px; z-index: 1; display: block;">

我哪里出错了，有人可以帮忙吗？

【问题讨论】：

欢迎来到 *** :) 你能用你的代码发布一个小提琴

我有它相当复杂的 angularjs 结构，真的很难创建一个小提琴。但是你能告诉我 jquery 和 jquery-ui 版本是否对 datepicker 很重要吗？

【参考方案1】：

由于我无法写评论，所以我正在写这个答案。 所以 ngOnInit 在应用程序初始化时只运行一次。这就是为什么你的日期选择器在导航回视图时没有被渲染的原因。 根据角度官方文档

ngOnInit()

默认更改后立即调用的回调方法 检测器已检查指令的数据绑定属性 第一次，并且在任何视图或内容之前 检查。当指令被实例化时，它只被调用一次。

也许你可以使用 ngAfterViewInit() 钩子或生命周期中的任何适当的钩子。现在不要向我扔西红柿，因为我没有积极使用 angular，但我认为我可以提供帮助。

【讨论】：

我试过 ngAfterViewInit()，第二次还是不行。我必须销毁元素还是什么？

正如我提到的，您必须检查每次渲染视图时运行的适当的生命周期挂钩。希望对你有帮助