从另一个组件导航后，Jquery代码未执行。仅在角度4上重新加载时执行

我是新来的，正在做一个angular 4项目。我编写了一些jquery代码来在视图中附加元素，但代码仅在重新加载页面时执行。使用角度路由从另一个页面导航后，它不会执行。我不知道该怎么办。我的代码是这样的

import { Component, OnInit, ElementRef, ViewChild, Renderer2, Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

declare var jQuery: any;

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit, AfterViewInit {
  public categories: any;
  public response: any;


  constructor(private elementRef: ElementRef, private renderer: Renderer2, private authService: AuthService, private http: Http, private routes: Router, private dataService: DataService) {

  });

  ngAfterViewInit() {
    this.getCategories();
  }

  ngOnInit() {
    jQuery('.newOption').on('click', function (this) {
      console.log(this);
      console.log(jQuery(this).data('value'));
      this.searchByCategory = jQuery(this).data('value');
      this.searchProducts();
    });
  }

  getCategories() {
    let body = {

    }
    this.dataService.globalAjaxGet('category/list').then((res) => {
      this.response = res;
      this.categories = this.response.data.categories;

      //this code will run on reload but doesnot executes when navigating from another component. 
      jQuery('.newSelect').prepend('<div class="selectedOption">Browse Categories</div><div class="newOptions"></div>');
      for (let cat of this.categories) {
        jQuery('.newOptions').append('<div id="option_' + cat.id + '" class="newOption" data-value="' + cat.id + '">' + cat.category + '</div>')

      }
      this.ngOnInit();

    }).catch((e) => {

    });
  }

}

从'@angular/core'导入{Component，OnInit，ElementRef，ViewChild，renderr2，Injectable}；
从'@angular/Http'导入{Http，Response}；
声明var jQuery:any；
@组成部分({
选择器：“应用程序标题”，
templateUrl:'./header.component.html'，
样式URL:['./header.component.css']
})
导出类HeaderComponent实现OnInit，AfterViewInit{
公共类别：任何；
公众反应：任何；
构造函数（private-elementRef:elementRef，private-Renderer2，private-authService:authService，private-http:http，private-routes:Router，private-dataService:dataService）{
});
ngAfterViewInit（）{
这个.getCategories（）；
}
恩戈尼尼特（）{
jQuery（'.newOption'）。关于（'click'，函数（this）{
console.log（this）；
log（jQuery（this.data（'value'））；
this.searchByCategory=jQuery（this.data（'value'）；
这是searchProducts（）；
});
}
getCategories（）{
让主体={
}
this.dataService.globalAjaxGet（'category/list'）。然后（（res）=>{
这个响应=res；
this.categories=this.response.data.categories；
//此代码将在重新加载时运行，但在从其他组件导航时不会执行。
jQuery（'.newSelect'）.prepend（'Browse Categories'）；
对于（让我们来看看这个类别）{
jQuery（'.newOptions'）.append（''+cat.category+''）
}
这个；
}).catch（（e）=>{
});
}
}

最主要的是这个头部组件，它包含在另一个组件中。提前谢谢

请移动这条线

声明var jQuery:any在app.module.ts中（根模块）
每个组件都将使用它。我试过了

Ref[
请在app.module.ts（根模块）中使用此
声明变量jQuery:any；
每个组件都会使用它。我试过了。Ref我应该把它放在应用程序模块中的什么地方请参阅示例演示的附加链接。此网站为空，此处没有任何内容或我无法访问此网站错误找不到jQuery。在应用程序模块中声明后，只有标题组件表示找不到jQuery您可以使用
$
symb根据jQuery版本，使用ol而不是jQuery。