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.