如何在angular2中加载模板时调用函数？

Question

I am new to angular2. I have a requirement to call a function when a template loads/initializes. I know how to do this in angular1.x., but I am not able to find out how it can be done in angular-2.

This is how I tried in angular1.x

In html

<div ng-init="getItems()">
//some logic to get my items
</div>

In controller

getItems = function(){
console.log('in the getitems function call');
//logic to get my items from db/localStorage
} 

This is how I used ng-init in angular1.x, but there is no ng-init in angular-2?Please help me on this issue.

Answer 1

@Component({
 ...
})
class MyComponent {
  constructor() {
    // when component class instance is created
  }

  ngOnChanges(...) {
    // when inputs are updated
  }

  ngOnInit() {
    // after `ngOnChanges()` was called the first time
  }

  ngAfterViewInit() {
    // after the view was created
  }

  ngAfterContentInit() {
    // after content was projected
  }
}

See also https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-overview for the full list

Answer 2

Check lifecycle events of a component https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html . From what you are saying you probably needs ngAfterViewInit

Answer 3

In angular2 you can use component phase ngOnInit it is equal to on-init in angularJS. Here is more information about lifecycle in angular .

Example:

export class PeekABoo implements OnInit {
 constructor(private logger: LoggerService) { }

 // implement OnInit's `ngOnInit` method
 ngOnInit() { 
  this.logIt(`OnInit`); 
 }

 protected logIt(msg: string) {
  this.logger.log(`#${nextId++} ${msg}`);
 }
}