javascript - 如何在 Angular 2 应用程序中嵌入 javascript 组件？

Question

在我的 Angular 2 应用程序中，我想嵌入这个用纯 Javacsript 编写的“标签输入组件”:

https://github.com/yairEO/tagify

将它包含/嵌入到我的 typescript 中的正确方法是什么？

这是我的文件片段，我希望在其中显示组件:

我在 Angular 2 和 Typescript 方面处于初学者水平，但我希望我的问题是有道理的。

Answer 1

将这些添加到您的 index.html 文件中

<script src="jQuery.tagify.js"></script>
<link rel="stylesheet" type="text/css" href="tagify.css">

在您要使用 tagify 的组件中添加以下内容

declare var Tagify:any;

例如

import { Component } from '@angular/core';
declare var Tagify:any;
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

例如，然后在组件的 ngAfterViewInit 中添加 tagify 逻辑

export class AppComponent implements AfterViewInit  { 
  name = 'Angular'; 
  ngAfterViewInit() {
    var input = document.querySelector('input[name=tags]'),
    tagify = new Tagify( input );
  }

}