Angular 2 Typescript 中的第三方库

Third-party library in Angular 2 Typescript

本文关键字：第三方 Typescript Angular      更新时间：2023-09-26

我正在尝试在我的项目中使用 pickadate.js 库。

到目前为止我尝试过...

  ngAfterViewInit() {
    $('.datepicker').pickadate({
        format: 'mm/dd/yyyy',
        formatSubmit: 'mm/dd/yyyy',
        hiddenName: true
    });
  }

收到以下错误：

$（...）。pickadate不是一个函数

我真的不想为索引中的任何内容编写 td.ts.html：

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My Angular2 App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- inject:css -->
  <link rel="stylesheet" href="/node_modules/pickadate/lib/themes/default.css">
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/app/assets/main.css">
  <!-- endinject -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"> </script>
    <!-- inject:js -->
  <script src="/node_modules/pickadate/lib/legacy.js"></script>
  <script src="/node_modules/pickadate/lib/picker.time.js"></script>
  <script src="/node_modules/pickadate/lib/picker.date.js"></script>
  <script src="/node_modules/pickadate/lib/picker.js"></script>
  <!-- endinject -->
</head>
<body>
...

确保已将 jQuery 的 TSD（右键单击，另存为...）包含在您的应用程序组件中：

/// <reference path="../path/to/jquery.d.ts" />

然后也下载此键入并导入如下：

/// <reference path="../path/to/pickadate.d.ts" />

最后，确保将jQuery和PickADate导入到HTML中。如果一切正常，您的代码应该可以工作。

不能在组件模板中添加库脚本标记。 Angular2 模板中的<script>标签将被丢弃。

相关文章：