ng2 使用jquery

有時候會在angular2中使用jquery，以使用某些jquery的效果，好比實現新聞輪播的效果：http://www.jq22.com/yanshi7462

須要本地庫中有jquery，沒有的話npm install jquery便可

jquery.vticker-min.js 是所需的依賴

angular的component以下：

import {Component, OnInit} from "@angular/core";
import * as jquery from "jquery";
require("../../../../../assets/js/jquery.vticker-min.js");
import "style-loader!./test.component.scss";

@Component({
  selector: 'test-table',
  templateUrl: './test.component.html'
})

export class testComponent implements OnInit {

  ngOnInit() {
    jquery('#news-container').vTicker({
      speed: 500,
      pause: 2000,
      animation: 'fade',
      mousePause: false,
      showItems: 3
    });

    jquery('#news-container1').vTicker({
      speed: 700,
      pause: 4000,
      animation: 'fade',
      mousePause: false,
      showItems: 1
    });
  }
}

html:

<div id="news-container1">
  <ul>
    <li>News content1</li>
    <li>News content2</li>
    <li>News content3</li>
    <li>News content4</li>
    <li>News content5</li>
  </ul>
</div>
<div style="overflow: hidden; position: relative; height: 114px;" id="news-container">
  <ul style="position: absolute; margin: 0pt; padding: 0pt; top: 0px;">
    <li>
      <div> 4) jugbit.com jquery vticker more info more info more info more info more info </div>
    </li>
    <li>
      <div> 1) Lorem ipsum dolor sit amet, porta at, imperdiet id neque. more info </div>
    </li>
    <li>
      <div> 2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info </div>
    </li>
    <li>
      <div> 3) Lorem ipsum dolor sit amet more info more info more info more info </div>
    </li>
  </ul>
</div>

css:

#news-container1 { margin: 0 auto; width: 180px; height: 24px;}
#news-container { width: 400px; height: 150px; margin:0 auto; margin-top: 30px; padding: 0 10px; border: 5px solid #333;}
#news-container ul { overflow: hidden; width: 400px; }
#news-container ul li{ display: block; height: 48px; background: #fff;}
#news-container ul li div { border-bottom: 1px solid #ddd;	background: #fff;}