我如何重新绑定javascript到angular2组件中的元素？

问题描述：

我已经在我的angular2应用程序的javascript文件中定义了一些自定义脚本。当我导航到其他组件并回到上一个时，由于js文件没有被第二次加载，脚本没有被绑定到html元素。我如何重新绑定到angular2组件的html元素的脚本？或者每当我导航到该组件时重新加载组件所需的js文件？我如何重新绑定javascript到angular2组件中的元素？

更新了代码

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Title</title> 
    <base href="/"> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <my-app></my-app> 
</body> 
</html>

myjs.js

$(document).ready(function() { 
    $('#btnNext').click(function(){ 
     $('#myModal').modal('show'); 
    }); 
});

vendor.ts

个

// Angular 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 
// RxJS 
import 'rxjs'; 
// Other vendors for example jQuery, Lodash or Bootstrap 
// You can import js, ts, css, sass, ... 
import '../public/css/bootstrap.css'; 
import '../public/css/style.css'; 
import '../public/js/bootstrap.js'; 
import '../public/js/myjs.js';

modal.component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'my-modal', 
    template: ` 
     <button type="button" id="btnNext" class="btn btn-primary btn-lg"> 
     Launch demo modal 
     </button> 

     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
      ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div> 
     </div> 
     </div> 

     <button class="btn btn-secondary btn-lg" (click)="goToNextView()">Go to next view </button> 
    ` 
}) 
export class ModalComponent { 
    constructor(
     private router: Router 
    ){} 

    goToNextView(){ 
     this.router.navigate(['/next']); 
     } 

}

下view.component.ts

import { Component } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'my-view', 
    template: ` 
     <b>Hello this is my next route.</b> 
     <button class="btn-secondary btn-lg" (click)="goToModal()">Go Back</button> 
    ` 
}) 
export class NextViewComponent { 
    constructor(
     private router: Router 
    ){} 

    goToModal(){ 
     this.router.navigate(['/']); 
    } 
}

APP-routing.module.ts

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { ModalComponent } from './modal.component' 
import { NextViewComponent } from './next-view.component'; 
const routes: Routes = [ 
    { 
     path:'', 
     redirectTo: '/', 
     pathMatch: 'full' 
    }, 
    { 
     path:'', 
     component: ModalComponent 
    }, 
    { 
     path: 'next', 
     component: NextViewComponent 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule], 
}) 
export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { AppRoutingModule } from './app-routing.module'; 

import { AppComponent } from './app.component'; 
import { ModalComponent } from './modal.component'; 
import { NextViewComponent } from './next-view.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     CommonModule, 
     AppRoutingModule 
    ], 
    declarations: [ 
     AppComponent, 
     ModalComponent, 
     NextViewComponent 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule{}

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<router-outlet></router-outlet>` 
}) 
export class AppComponent {}

最初我的应用程序是这样的：

当我点击启动d EMO模式：

，当我浏览到“下一个”路线：

当我点击“返回”，来到初始页面，然后我的模式不会打开。我对此做了大量的研究，发现当我导航回该组件时，我所包含的js没有绑定到组件的元素。

那么如何重新组合我的JS到元素？如果这不是我们如何在angular2中做的事情，那么请指导我如何正确地做到这一点。

你可以创建一个最小的例子，这样我们可以重现这个问题吗？原因可能是很多事情，你的问题将被标记为不清楚它现在的样子。 – echonax

你在谈论脚本标签吗？如果是这样，角2并不意味着这样工作... – n00dl3

@ n00dl3我有一些功能单独的js文件，我通过 –

答

看来，我可以在ngAfterViewInit（）中包含触发器脚本来使其工作。

这是我如何做的：

modal.component.ts

import { Component, AfterViewInit } from '@angular/core'; 
import { Router } from '@angular/router'; 


@Component({ 
    selector: 'my-modal', 
    template: ` 
    <button type="button" id="btnNext" class="btn btn-primary btn-lg"> 
    Launch demo modal 
    </button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    </div> 
    <div class="modal-body"> 
    ... 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 
    </div> 
    </div> 

    <button class="btn btn-secondary btn-lg" (click)="goToNextView()">Go to next view </button> 
    ` 
}) 
export class ModalComponent implements AfterViewInit{ 
    constructor(
     private router: Router 
     ){} 

    goToNextView(){ 
     this.router.navigate(['/next']); 
    } 
    ngAfterViewInit(){ 
      $('#btnNext').click(function(){ 
       $('#myModal').modal('show'); 
      }); 
    } 
}

记住，打字稿会显示错误$和模式。但它会起作用。该错误将仅在控制台中显示。但是，如果你不希望看到在控制台还任何错误，那么只需安装分型为引导和jQuery

npm install @types/jquery --save-dev

和

npm install @types/bootstrap --save-dev

，你将不得不进口的jQuery在vendor.ts中为：

import * as $ from 'jquery';

就是这样。没有错误和工作脚本。

建议不要在angular2应用程序中使用JQUERY。您可以使用

NG2的自举或NG-引导

我只做到了，由于项目的时间约束。

我如何重新绑定javascript到angular2组件中的元素？

相关推荐