我想执行 js 文件以向 html 添加样式，但无法在 typescript 中加载 js 文件

Question

我正在学习 Angular 2。我想在 templateUrl 中添加脚本标签。 或者我想在打字稿文件中运行脚本文件。 我有 home.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
  selector: 'my-index',
  templateUrl : 'app/home.html',
  directives: [ ROUTER_DIRECTIVES ]


})
export class IndexComponent {
  abt = 'HOME';
}

并且 home.html 文件包含

<div class="main-container">
  <header class="page-header">
    <div class="background-image-holder"> <img class="background-image" alt="Background Image" src="img/tab/home_slide_bk_1.jpg"> </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-12 text-center">
          <h1 class="text-white space-bottom-medium">A complete guaranteed and programmatic platform</h1>
          <a [routerLink]="['/contact']" class="btn btn-primary btn-filled">Learn more</a> </div>
      </div>

我想在这个 html 文件中添加我的 JS 文件，但是 TypeScript 删除了脚本标签，所以我无法对 home.html 文件进行更改

我的 JS 文件是 scriptshome.js

$(document).ready(function(){

    "use strict";
    $('.background-image-holder').each(function(){
        var imgSrc= $(this).children('img').attr('src');
        $(this).css('background', 'url("' + imgSrc + '")');
        $(this).children('img').hide();
        $(this).css('background-position', '50% 0%');
    });

JS 文件包含上面提到的多个函数 我想使用所有这些功能。

Answer 1

您可以在组件中编写函数并从构造函数中调用它们。

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
  selector: 'my-index',
  templateUrl : 'app/home.html',
  directives: [ ROUTER_DIRECTIVES ]
})

export class IndexComponent {
  public abt = 'HOME';

constructor() {
   changeImg();
}

 changeImg() {
  $('.background-image-holder').each(function(){
        var imgSrc= $(this).children('img').attr('src');
        $(this).css('background', 'url("' + imgSrc + '")');
        $(this).children('img').hide();
        $(this).css('background-position', '50% 0%');
    });
  }
}

如果要在DOM加载后调用该函数，则可以在ngAfterViewInit()内调用

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
  selector: 'my-index',
  templateUrl : 'app/home.html',
  directives: [ ROUTER_DIRECTIVES ]
})

export class IndexComponent {
  public abt = 'HOME';

ngAfterViewInit() {
   changeImg();
}

 changeImg() {
  $('.background-image-holder').each(function() {
        var imgSrc= $(this).children('img').attr('src');
        $(this).css('background', 'url("' + imgSrc + '")');
        $(this).children('img').hide();
        $(this).css('background-position', '50% 0%');
    });
  }
}