Question

我正在学习角度2.我想在templateUrl中添加脚本标签。或者我想在typescript文件中运行脚本文件。我有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%');
    });
  }
}

我想执行js文件以将样式添加到html但不能在typescript中加载js文件

1 个答案: