Búsqueda de sitios web

jquery - $.notify no es una función al usar Bootstrap notify en typescript


Estoy tratando de mostrar una alerta en mi sitio usando bootstrap-notify v3.1.3, TypeScript, Aurelia y VS2015.

Mi componente Aurelia es:

//myAlert.ts

import * as $ from "jquery";

export class FlAlert {

    constructor() {
    }

    alert() {
        $.notify("Hello");
    }
}

//myAlert.html

<template>
    <button class="btn" click.delegate="alert()">showAlert</button>
</template>

Cuando hago clic en el botón recibo este error: "Uncaught TypeError: $.notify no es una función"

Incluí en mi proyecto bootstrap-notify.d.ts, así que VS reconoce el método "notify" del archivo d.ts

//bootstrap-notify.d.ts

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

/* tslint:disable: interface-name no-any */

interface JQueryStatic {
    notify(message: string): INotifyReturn;
    notify(opts: INotifyOptions, settings?: INotifySettings): INotifyReturn;
    notifyDefaults(settings: INotifySettings): void;
    notifyClose(): void;
    notifyClose(command: string): void;
}

interface INotifyOptions {
    message: string;
    title?: string;
    icon?: string;
    url?: string;
    target?: string;
}

interface INotifySettings {
    element?: string;
    position?: string;
    type?: string;
    allow_dismiss?: boolean;
    allow_duplicates?: boolean;
    newest_on_top?: boolean;
    showProgressbar?: boolean;
    placement?: {
        from?: string;
        align?: string;
    };
    offset?: number;
    spacing?: number;
    z_index?: number;
    delay?: number;
    timer?: number;
    url_target?: string;
    mouse_over?: Function;
    animate?: {
        enter?: string;
        exit?: string;
    };
    onShow?: () => void;
    onShown?: () => void;
    onClose?: () => void;
    onClosed?: () => void;
    icon_type?: string;
    template?: string;
}

interface INotifyReturn {
    $ele: JQueryStatic;
    close: () => void;
    update: (command: string, update: any) => void;
}

Editar:

Este es el punto de entrada de la aplicación Aurelia:

export function configure(aurelia: Aurelia) {

    aurelia.use
        .singleton(Constants)
        .plugin("bootstrap", null)
        .standardConfiguration()
        .developmentLogging();

    aurelia
        .start()
        .then(a => a.setRoot('Components/Layout/app'));
}

Respuesta #1

Llego tres años tarde, pero hoy tuve el mismo problema y lo solucioné simplemente agregando import 'bootstrap-notify'; a mi componente.

Artículos relacionados