Question

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

已更新为代码

的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(['/']);
    }
}

应用-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 {}

最初我的应用看起来像这样：

当我点击Launch demo模式时：

当我导航到＆＃39; next＆＃39;路线：

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

那我怎样才能将我的JS重新绑定到元素上？如果不是我们在angular2中做事的方式，那么请指导我如何正确地做到这一点。

Answer 1

似乎我可以在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');
            });
    }
}

请记住，typescript会显示 $ 和模态的错误。但它会奏效。该错误仅显示在控制台中。但是，如果您不想在控制台中看到任何错误，那么只需安装bootstrap和jquery的输入法

npm install @types/jquery --save-dev

和

npm install @types/bootstrap --save-dev

你必须在vendor.ts中导入jquery：

import * as $ from 'jquery';

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

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

ng2-bootstrap 或 ng-bootstrap

由于项目的时间限制，我才这样做。

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

1 个答案: