注意

Question

嗨，我编写了一个插件来在事件发生后显示警报。它的名字叫tdAlert。它在我的某些组件中工作正常，但在我的其他一些组件中却无效。

这是工作组件；

import { Component } from '@angular/core';
import { SharedService } from '../../../services/shared';
import { Router } from '@angular/router';

@Component({
    selector: 'admin-header',
    templateUrl: './header.html',
    providers: [SharedService]
})

export class AdminHeaderComponent {
    errorMsg: string;

    kullanici: any;

    constructor(private service: SharedService, private router: Router) {
    }

    ngOnInit() {
        $("#tdAlertMessage").tdAlert({
            title: 'blah blah',
            message: 'blah blah.',
            time: 2
        });

        this.service.getCurrentUser().subscribe((resData) => {
            if (resData != null) {
                this.kullanici = resData;
            }
        }, resError => this.errorMsg = resError);

        $('#txtMainSearch').typeahead({
            source: [
                'Kategoriler',
                'Kategoriler (Dil)',
                'İçerikler',
                'Kullanıcılar'
            ],
            items: 4
        });
    }
}

它在此组件中不起作用，它给出“ jquery__WEBPACK_IMPORTED_MODULE_6 __（...）。tdAlert不是函数”错误。

import { Component } from "@angular/core";
import { GaleriService } from "../../services/galeri";
import { SharedService } from '../../services/shared';
import { Router } from '@angular/router';
import * as $ from "jquery";

@Component({
    templateUrl: './index.html',
    providers: [GaleriService, SharedService]
})

export class AdminGaleriIndexComponent {
    errorMsg: string;
    GaleriList: {};

    insertShow: boolean;

    callTable: boolean;

    constructor(private service: GaleriService, private sharedService: SharedService, private router: Router) {
    }

    ngOnInit() {
        this.callTable = true;
        this.UserRightsControl($("#hdnModel").val());
    }

    onDelete(id) {
        this.service.getSil(id).subscribe((resData) => {
            if (resData == true) {
                $("#tdAlertMessage").tdAlert({
                    title: 'blah blah',
                    message: 'blah blah.',
                    time: 2
                });

                $("a.dltLink.active-dlt").parent("li").parent("ul").parent("div").parent("td").parent("tr").fadeOut("slow", function () {
                    $(this).remove();
                });
            }
            else {
                $("#tdAlertMessage").tdAlert({
                    title: 'blah blah',
                    message: 'blah blah.',
                    time: 2
                });
            }
        }, resError => this.errorMsg = resError);
    }

    UserRightsControl(Model: any) {
        this.sharedService.getHasRight(Model, "i").subscribe((iRight) => {
            this.insertShow = iRight;

            if (this.callTable == true) {
                this.service.getIndex().subscribe((resData) => {
                    this.GaleriList = resData;
                    this.callTable = false;

                    setTimeout(() => {
                        $(".data-table").dataTable({
                            "bJQueryUI": true,
                            "sPaginationType": "full_numbers",
                            "sDom": '<""l>t<"F"fp>'
                        });

                        if ($(".dropdown-menu").first().find("a").length <= 0) {
                            $(".btn-group").remove();
                        }

                        $(document).on("click", ".fg-button", () => {
                            setTimeout(() => {
                                this.UserRightsControl($("#hdnModel").val());
                            }, 1);
                        });
                    }, 1);
                }, resError => this.errorMsg = resError);
            }

            setTimeout(() => {
                if ($(".dropdown-menu").first().find("a").length <= 0) {
                    $(".btn-group").remove();
                }
            }, 1);

        }, resError => this.errorMsg = resError);
    }
}

这是我的app.module.ts文件；

import { Component } from '@angular/core';

declare global {
    interface JQuery {
        tdAlert(obj: any): JQuery;
        dataTable(obj: any): JQuery;
        typeahead(obj: any): JQuery;
    }
}

@Component({
    selector: 'ang-app',
    templateUrl: './app.html'
})

export class AppComponent {
    ngOnInit() {

    }
}

请帮助我。大约2天找不到任何解决方案。

Answer 1

有几种方法可以做到这一点：例如，您可以将jquery作为脚本添加到ur index.html中，然后每当要在ur组件中使用jquery时，只需添加：

declare const $: any;

是您班级中的佼佼者，而不是您的import * as $ from "jquery"; ，那么它将非常完美。

注意

如果您想将其与第三方插件一起使用，只需通过npm进行安装，如下所示：

npm install jquery
npm install @types/jquery -D // in case u r using ts and want to have some autocomplete ability

然后定义具有以下内容的js文件：

var jQuery = require('jquery');
var $ = jQuery;

在ur index.html中添加js文件，然后在其后添加其他3rd party plugins脚本标签，该方法对我有用，但是您也可以搜索其他选择和方法

带有Jquery插件的Angular 7

1 个答案:

注意