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

Question

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

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

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

$viewContentLoaded 基本上与我所看到的一样。我的 $routerOnActivate 函数中有这个。

方法一

public $postLink(){
    this.log.debug('postLink all done');
}

方法二

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

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

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

Answer 1

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

生命周期挂钩

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

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

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

Answer 2

添加代码 sn-p 会有很大帮助。 有几件事不清楚。

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

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