Question

我导入了一些javascript，并将它们放在'angular-cli.json'中，代码如下：

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": "assets",
  "index": "index.html",
  "main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "style/styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "style/AdminLTE.css",
    "../node_modules/ionicons/css/ionicons.min.css",
    "style/_all-skins.min.css",
    "../node_modules/bootstrap-select/dist/css/bootstrap-select.min.css",
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
    "../node_modules/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.css",
    "../node_modules/bootstrap-toggle/css/bootstrap-toggle.min.css"

  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "script/app.min.js",
    //===========================
    "../node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
    //===========================
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js",
    "../node_modules/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js",
    "../node_modules/bootstrap-toggle/js/bootstrap-toggle.min.js",
    "script/for_new_push.js"
  ],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

像js导入"bootstrap-select.min.js"之间的＆＃34; =============＆＃34;，它将在刷新页面时执行，使用类{{处理选择在一个组件中1}}（如下所示）：

"selectpicker"

正常选择显示，但如果我从另一个组件移动到此组件，则选择不会正常显示。 javascript只适用于刷新页面一次，如果DOM生成之后，DOM就不会被激活。

一种方法是在其组件中使用下面的代码。每次加载此组件时，这将激活<select class="selectpicker" > <option selected>所有店</option> <option>1</option> <option>2</option> <option>3</option> </select>。

".selectpicker"

但我不确定这是一个好方法，所以我想知道更好的解决方案来解决这个问题。

Answer 1

当导航仅更改路由参数时，目前无法使Angular2路由器重新创建组件。有计划支持这一点。

您可以通过订阅路由参数更改并在那里执行代码

来解决

constructor(private route:ActivatedRoute) {}

ngOnInit() {
  route.params.subscribe(p => {
    this.myInit(); // successive params changes
  });
  this.myInit(); // first time
}

myInit() {
  jQuery($('.selectpicker').selectpicker()';
}

Angular2如何在使用路由

1 个答案: