Javascript 如何在angular 2中再次调用ngAfterViewInit中的代码

在我的角度组件中，我有

ngAfterViewInit

方法，该方法包含一些语句，我希望在视图初始化后执行这些语句，因为它包含一些DOM操作

---

我的问题是，当某些参数发生更改时，如果要在每次更改时执行这些语句，我希望在

ngAfterViewInit

中运行代码，而不是在

ngAfterViewChecked（）

中编写这些语句

在默认更改检测器完成检查组件视图的更改后调用的生命周期挂钩

在默认更改检测器完成组件视图的一个更改检查周期后立即调用的回调方法

因此，每次后续更改都会调用它

---

更多信息也可以在文档中找到

如果您的参数是可观察的，您可以在

ngAfterViewInit

方法中订阅它。如果您的参数还不能作为可观察的参数使用，我建议您查看该类。这样，您可以控制可观察对象何时发出新值+订阅时将使用最后一个值触发它

您可以在构造函数中定义一个

EventEmitter

，在

ngAfterViewInit（）

函数中订阅它以更新这些值，在

ngAfterViewInit（）中发出它

函数，然后每次要在组件的后续区域中调用它时都再次发出它。以下是一个例子：

从'@angular/core'导入{EventEmitter}；
导出类MyComponent实现AfterViewInit{
公共myEvent:EventEmitter；
公共构造函数（）{
this.myEvent=新的EventEmitter（）；
}
public ngAfterViewInit（）：void{
//这就是您如何调用函数来执行下面的DOM操作。如果您希望这样做，您甚至可以从HTML中调用这个确切的函数（参见HTML示例）。
this.myEvent.emit（）；
这是myEvent.subscribe(
() => {
//执行执行DOM操作所需的任何操作。
},
（err:Error）=>控制台错误（err）；
);
}
public emitMyEvent（）：void{
this.myEvent.emit（）；
}
}

---

我通过实现

OnChanges

解决了问题，并调用

ngAfterviewInit

进行第一次更改以外的更改。这样我将确保视图已初始化。顺便说一句，变量beforchange（changed_var）保存DOM操作中使用的数据

ngOnChanges(changes: SimpleChanges){
    if(!changes.changed_var.isFirstChange()){
        this.ngAfterViewInit();
    }
}

---

在类主体中声明普通类方法，然后在ngAfterviewInit上下文中定义它们。 下面是一个简单的用例示例：

export class ViewtestComponent implements OnInit, AfterViewInit{
  @ViewChild('someElementMewantedToDoAction') elRef: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }

  changeVal; 

  ngAfterViewInit() {
    this.changeVal= (useME) => {
      // some action
      this.elRef.nativeElement.innerText++;
    }
   }

稍后，使用模板中的方法作为

// Do Action=  Button value will increment 11, 12 13 ... on each button   click.

<button class="button success" (click)="changeVal($emit)>10</button>

//Do Action=按钮值将增加11、12和13。。。在每个按钮上单击。
只需将代码移动到从
ngAfterViewInit
调用的另一个方法，以及您需要的任何其他方法。如果组件未初始化，该代码会给我错误。这就是为什么我把它放在ngAfterViewInit中的原因。也许这会让你发布导致错误的代码和错误消息。@GünterZöchbauer代码使用d3绘制图表。谢谢你的回答，因为我没有在ngAfterViewInit（）中订阅我的Observable（bcoz-我在模板中使用异步管道直接呈现来自服务器的最新数据）所以我的模板没有得到更新的结果。