Angular 中的 JavaScript 函数“未定义”错误

Question

我正在尝试让 Angular 17 项目运行起来。我正在使用 Bootstrap (5)，并尝试让 datePicker 工作。这需要一些 JavaScript 代码，但我无法使用这些代码。我已经遵循了各种教程，但不知何故，在构建应用程序时，我不断收到“ReferenceError：datePicker 未定义”错误。

我已采取以下步骤：

1. 在我的资产文件夹中创建了一个名为 TestJavaScript.js 的文件。该文件包含如下javascript函数

    $(function(){
        $('#datepicker').datepicker({
        format      :   "YYYY",
        viewMode    :   "years"
        });
     });
   

2. 然后我在scripts部分的angular.json文件中添加了引用路径，如下：

        "scripts": [
            "node_modules/jquery/dist/jquery.min.js",
            "node_modules/bootstrap/dist/js/bootstrap.min.js",
            "src/assets/TestJavaScript.js"
        ],
   

3. 然后，在 component.ts 文件中声明该函数，然后尝试导出它。 “datePicker is not Defined”错误仅出现在最后一步。

    import { Component } from '@angular/core';
   
    declare function datePicker(): void;
   
    @Component({
      selector: 'app-available-funds',
      standalone: true,
      imports: [],
      templateUrl: './available-funds.component.html',
      styleUrl: './available-funds.component.css'
    })
    export class AvailableFundsComponent {
      constructor(){
        datePicker();
      }
    }
   

我做错了什么？

Answer 1

所以，结果比我想象的要容易得多。

在 Angular 中，无需手动加载 JavaScript 文件。相反，我们可以简单地将必要的包包含在 Package.json 文件中。之后，我们可以将包模块集成到 Angular 组件模块中，并在 HTML 代码中使用选择器或指令。

对于实际示例，我参考了以下链接：https://ng-bootstrap.github.io/#/components/datepicker/examples示例。这应该可以让流程更加清晰。