Why are angular2 Lifecycle Hooks not working after using jquery query builder?

问题

I imported jquery query builder in my project as How to use Jquery Query Builder in Angular told.

ngOnInit() {
this.templateService.getTags(this.contentType)
  .then(tags => {
    this.tags = tags;
  });
}

ngAfterViewInit() {
  this.getQueryBuilder();
}

getQueryBuilder() {
let self = this;
if (self.builder) {
  $(self.builder.nativeElement).queryBuilder({
      plugins: ['bt-tooltip-errors','not-group'],

      filters: [{
          id: 'tag',
          label: 'Tag',
          type: 'string',
          input: 'select',
          values: {
                1: 'Books',
                2: 'Movies',
                3: 'Music',
                4: 'Tools',
                5: 'Goodies',
                6: 'Clothes'
            },
          operators: ['equal']
      }],

      rules: this.rules_basic
  });

}
}

Although it worked, angular lifecycle hooks are not working. It always comes to the getQueryBuilder() function first,usually ngOnInit() executes first,and then gAfterViewInit(),and the autocompletion is not working.Why? Can somebody help me? Thanks a lot.

回答1:

try this :

ngOnInit(){
this.templateService.getTags(this.contentType)
  .then(tags => {
    this.tags = tags;
    this.getQueryBuilder();
  });
}

Now only after the response from templateService , this.getQueryBuilder() is executed

来源：https://stackoverflow.com/questions/47071071/why-are-angular2-lifecycle-hooks-not-working-after-using-jquery-query-builder