J'essaie d'utiliser ng2-toastr dans mon application angular 2. J'ai suivi toutes les instructions mais le toastr ne s'affiche pas sans aucune erreur de console. J'ai également lu quelque part que ng-toastr ne fonctionne plus avec angular 2 mais je n'ai trouvé aucune documentation valide à ce sujet. J'ai recherché des questions similaires mais je n'ai trouvé aucune réponse appropriée à mon problème. Toute aide serait appréciée.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import{ ToastModule} from 'ng2-toastr/ng2-toastr';
import { BrowserAnimationsModule} from '@angular/platform-
browser/animations';
import "hammerjs"
import { CoreModule } from './core/core.module';
import { MODULE_ROUTES, MODULE_COMPONENTS } from './app.router'
@NgModule({
declarations: [
MODULE_COMPONENTS
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(MODULE_ROUTES),
BrowserAnimationsModule,
CoreModule,
ToastModule.forRoot()
],
providers: [ ],
bootstrap: [MODULE_COMPONENTS]
})
export class AppModule { }
app.component.ts
import { Component, ViewContainerRef } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
@Component({
selector: 'wow-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
constructor( public toastr: ToastsManager, private vRef: ViewContainerRef)
{
this.toastr.setRootViewContainerRef(vRef);
console.log(this.toastr);
}
}
Voici comment j'appelle la méthode toastr dans l'un de mes composants:
login() {
this.user_service.login(this.user).then((response) => {
console.log(response)
this.toastrManager.success('Successfully Logged in.')
}
package.json
"dependencies": {
"@angular/animations": "^4.1.3",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-image-upload": "^0.6.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^3.2.1",
"ng2-toastr": "^4.1.2",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.0.3",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38"
}
J'ai également ajouté "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
dans mon angular-cli.json. il s'agit de console.log
2 réponses
[ MISE À JOUR ]
J'ai finalement réussi à résoudre le problème, pensé à le partager avec tous ceux qui sont coincés dans le même problème. Veuillez changer le code suivant
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
À
import { ToastsManager } from 'ng2-toastr';
Depuis, le ToastsManager est exporté depuis le répertoire parent et non depuis le sous-répertoire (au moins, dans les versions des dépendances que j'utilise).
Dans votre fichier angular-cli.json, ajoutez cette ligne dans une propriété styles
../node_modules/ng2-toastr/bundles/ng2-toastr.min.css
De nouvelles questions
angular
Questions sur Angular (à ne pas confondre avec AngularJS), le framework web de Google. Utilisez cette balise pour les questions angulaires qui ne sont pas spécifiques à une version individuelle. Pour l'ancienne infrastructure Web AngularJS (1.x), utilisez la balise angularjs.