Question

我在Angular 1.57 / Typescript应用程序中激活控制器生命周期挂钩时遇到问题。我正在使用组件（而不是控制器）。

我这样做的原因是因为我需要在加载所有HTML后进行一些DOM操作。我到目前为止尝试的两种方法如下。

$ postLink 是一个NGcontroller生命周期钩子，应该在加载所有DOM元素后触发。这是我的组件中的第一个功能。

$ viewContentLoaded 基本上与我所看到的相同。我在 $ routerOnActivate 函数中有这个。

方法1

$routerOnActivate(next, prev) {    
    this.$scope.$on('$viewContentLoaded', (event) => {
        this.log.debug('viewContentLoaded all done');
    });
};

方法2

var Shapes={};
var Shapes.createCircle=function(radius) {
  return {draw:function...}
};
var Shapes.createRectangle=function(width,height) {
  return {draw:function...}
};

实施这两种方法后， $ postLink all done 日志会在其他所有内容被触发之前，我的 $ viewContentLoaded all done 日志永远不会被触发。

这样做的目的是让我可以触发对页面上的HTML元素的操作。所以我需要等到所有HTML都加载完毕才能触发这些操作。

Answer 1

添加代码段会有很大帮助。有几点不清楚。

我们是在谈论单页应用程序，还是只是一个组件？
这个$ postLink挂钩是否在主要组件中？
关于路由器，请参阅：https://docs.angularjs.org/guide/component-router

$ routerOnActivate / $ routeOnReuse：在成功导航结束时由路由器调用。根据$ routerCanReuse调用的结果，将只调用$ routerOnActivate和$ routerOnReuse中的一个。

Answer 2

$postLink()的文档指出钩子在templateUrl的指令完成之前触发。

生命周期挂钩


$postLink() - 在此控制器的元素及其子元素已被链接之后调用。与post-link函数类似，此钩子可用于设置DOM事件处理程序并执行直接DOM操作。请注意，包含 templateUrl指令的子元素将不会被编译并链接，因为它们正在等待其模板异步加载，并且它们自己的编译和链接已暂停，直到发生这种情况。

- AngularJS Comprehensive Directive API -- Life-cycle hooks。

要么使用templateURL来避免指令，要么使用这些指令中的$postLInk()钩子来表示准备就绪。

角度组件中的生命周期钩子，DOM操作

2 个答案:

生命周期挂钩