在 Angular 5 中的 ngoninit 之后如何运行函数

Posted 2023-03-13

【中文标题】在 Angular 5 中的 ngoninit 之后如何运行函数

【英文标题】：What to do to run a function just after After ngoninit in angular 5

【发布时间】：2019-01-27 12:31:27

【问题描述】：

这是关于生命周期钩子的。我的要求是在页面初始化后运行一个函数是后台。我用过 ngAfterViewInit()。但它不等待从 ngoninit() 中找到的数组。

export class Parent2Component implements OnInit , DoCheck 

constructor(private getHTTP: HttpCallService)  

eventResults: any;
apiParam: any = ['posts', 'albums', 'comments', 'photos', 'users', 
'todos', 'posts', 'albums', 'comments', 'photos', 'users', 'todos',
'posts', 'albums', 'comments', 'photos', 'users', 'todos', 'posts', 
'albums', 'comments', 'photos', 'users', 'todos'];
 resultArray: any = [];
 finalArray: any = [];
 displayedColumns: string[] = ['resourceId'];
 finalObject: any = [];
 demoObject: any = [];



getCatagory(index) 
  this.demoObject = this.demoData.resources.webcast[index];
  console.log('this.demoObject' , this.demoObject);



getEventsData() 
  for (let index = 0; index < this.apiParam.length; index++) 
    this.getHTTP.getData('https://jsonplaceholder.typicode.com/' + 
  this.apiParam[index])
      .subscribe((response) => 
        this.eventResults = response;
        console.log('All Data of ' + this.apiParam[index] + 'is ' + 
  this.eventResults);
      );
  
 
getDemo() 
this.demoObject = this.demoData.resources.webcast[0];
this.getHTTP
  .getData('https://jsonplaceholder.typicode.com/posts' )
  .subscribe((respData) => 

      console.log('================Resp init====================');
      console.log(respData);
    );

 


getObs() 
const apiRoot = 'https://jsonplaceholder.typicode.com/';
const urls = [];
for (let i = 0; i < this.apiParam.length; i++) 
  urls.push(apiRoot + this.apiParam[i]);

of(...urls).pipe(
  concatMap((url: string) => this.getHTTP.getData(url)))
  .subscribe((result) => 
    this.resultArray.push(result);
    // console.log('this.resultArray', this.resultArray);

    if (this.resultArray.length === this.apiParam.length) 
      for (let index = 0; index < this.resultArray.length; index++) 
        // console.log(this.apiParam[index]);
        this.finalObject =  [this.apiParam[index]]: 
  this.resultArray[index] ;
        this.finalArray.push(this.finalObject);
      
    
  );
console.log('========this.finalArray============================');
console.log(this.finalArray);
// console.log('====================================');


ngOnInit() 
console.log('ONinit');
this.getDemo();


ngDoCheck() 
 console.log('AfterONinit');
 this.getObs();

如果我使用 ngDocheck()，代码会进入无限循环。而 ngViewinit 不适合这种情况。请帮帮我

【问题讨论】：

请提供一些代码。 ngAfterViewInit() 在 ngOnInit() 之后运行。 @Input() 数据在 OnInit 生命周期挂钩中可用。

发布您的代码。大胆猜测：您正在进行异步调用，并希望在异步结果返回时执行代码：这就是 Observable.subscribe() 的用途。但同样，这是一个疯狂的猜测，因为您还没有发布任何一行代码。

【参考方案1】：

正如我所见，您需要从 ngoni 调用的 getDemo 成功/完成并调用 getObs()。只需在 getDemo 的成功回调中调用 getObs：-

getDemo() 
this.demoObject = this.demoData.resources.webcast[0];
this.getHTTP
  .getData('https://jsonplaceholder.typicode.com/posts' )
  .subscribe((respData) => 

      console.log('================Resp init====================');
      console.log(respData);
      this.getObs(); // Add this here and you will get your expected behaviour of getting the result array before calling getObs
    );

 

【讨论】：

实际上我的目标是让浏览器加载器停止，然后在后台调用 getObs() 的 API。如果我按照你的建议做，加载器会不断旋转直到所有API 被称为