markdown 将JavaScript库导入Angular

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown 将JavaScript库导入Angular相关的知识,希望对你有一定的参考价值。

# Import JavaScript library into Angular

[SOURCE](https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af), [SOURCE](https://stackoverflow.com/a/44817445/1602807)

What works in Angular 7:

The JS library [trie-search](https://github.com/joshjung/trie-search) doesn't have the definition `.dt.ts` file to be used in TypeScript file. so we need to use the following method in order to use it.

Tips: using [Type Search](https://microsoft.github.io/TypeSearch/) to see if there's any pre created `.d.ts` for your library [SOURCE](https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af).

1. Add links to your JS library in `angular.json`:

```
"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
              "node_modules/slick-carousel/slick/slick.min.js",
              "node_modules/hasharray/dist/HashArray.js", // TriSearch also use this library
              "node_modules/trie-search/src/TrieSearch.js"
            ]
          },
```

2. Stop and build project again with `ng s`.

3. After this, you can declare and use `TrieSearch` as the following:

```
declare var TrieSearch: any;

@Component({
  selector: 'app-find-doctor',
  templateUrl: './find-doctor.component.html',
  styleUrls: ['./find-doctor.component.scss']
})
export class FindDoctorComponent implements OnInit {

  ....
  
  const ts = new TrieSearch();
}
```

4. If it doesn't work, then use this method instead. Create this file `src/typings.d.ts` with the following:

```
declare module 'hasharray';
declare module 'trie-search';
```

5. Then import and use it like this:

```
import * as TrieSearch from 'trie-search';

const ts: any = new TrieSearch();
```

以上是关于markdown 将JavaScript库导入Angular的主要内容,如果未能解决你的问题,请参考以下文章

推荐一个markdown格式转html格式的开源JavaScript库

JavaScript 如何将 HTML 转成 Markdown?

markdown Javascript / Typescript库

markdown (原始)Angular 2包括外部JavaScript库

导入外部库时 Kivy 在启动时崩溃

如何将lodash直接导入JavaScript中的自定义命名空间