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

Question

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

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

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

$ viewContentLoaded本质上与我所见相同。 我的$ routerOnActivate函数中有这个。

方法1

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

方法2

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

使用这两种方法， $ postLink所有完成的日志将在其他所有事件之前被触发，而我的$ viewContentLoaded所有完成的日志则永远不会被触发。

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

Answer 1

添加代码段会很有帮助。 几件事还不清楚。

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

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

Answer 2

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

生命周期挂钩

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

-AngularJS综合指令API-生命周期挂钩 。

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