Question

目前我只是在我的项目中检查ng-snotify插件的工作情况，但是在实现文档的所有内容时，它并没有显示toasts（在控制台中也没有错误）。

应用模块（在其中提供服务）

// Modules Default
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

//Routing
import {AppRoutingModule} from './app.routes'

//My Modules
import {NavigationModule} from './shared/navigation/navigation.module';
import {SidebarModule} from "./shared/sidebar/sidebar.module";
import {LoginModule} from './pages/login/login.module';
import {ForgotPasswordModule} from './pages/forgot-password/forgot-password.module';
import {CommsModule} from './pages/comms/comms.module';
import {DashboardModule} from './pages/dashboard/dashboard.module';
import {EventModule} from './pages/event/event.module';
import {OverviewModule} from './pages/overview/overview.module';
import {PricingModule} from './pages/pricing/pricing.module';
import {SignUpModule} from './pages/sign-up/sign-up.module';
import {UserCardsModule} from './pages/user-cards/user-cards.module';
import {UsersModule} from './pages/users/users.module';


// Services
import {AuthenticationGuard} from './guards/authentication/authentication.guard';
import {AuthenticationService} from './services/authentication/authentication.service';
import {SweetAlertService} from "./services/sweetalert/sweet-alert.service";
//Snotify Plugin
import {SnotifyService, ToastDefaults} from 'ng-snotify';


//Component
import {AppComponent}  from './app.component';
import {PageNotFoundComponent} from './pages/page-not-found/page-not-found.component';
import {ApiService} from "./services/api/api.service";
import {FrontendService} from "./services/frontend/frontend.service";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,

        //My Imports
        NavigationModule,
        SidebarModule,
        LoginModule,
        ForgotPasswordModule,
        SignUpModule,
        CommsModule,
        DashboardModule,
        EventModule,
        OverviewModule,
        PricingModule,
        UserCardsModule,
        UsersModule,
        AppRoutingModule,

    ],

    declarations: [
        AppComponent, PageNotFoundComponent,
    ],
    schemas: [],

    bootstrap: [AppComponent],

    providers: [
        {
            provide: LocationStrategy, useClass: HashLocationStrategy
        },
        {
            provide: 'SnotifyToastConfig', useValue: ToastDefaults
        },
        SnotifyService,
        FrontendService,
        AuthenticationGuard,
        ApiService,
        AuthenticationService,
        SweetAlertService
    ]

})
export class AppModule {

}

登录模块（在其中导入SnotifyModule）

    // System Imports
import {NgModule} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {CommonModule} from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms'
import {SnotifyModule} from 'ng-snotify';

//My Imports
import {LoginRoutingModule} from './login-routing.module'
import {LoginComponent} from './login.component';

@NgModule({
    imports: [
        NgbModule.forRoot(),
        CommonModule,
        ReactiveFormsModule,
        LoginRoutingModule,
        SnotifyModule
    ],
    declarations: [
        LoginComponent
    ],
    providers: [
    ]
})
export class LoginModule {
}

登录模板（此处为snotify选择器）

<ng-snotify></ng-snotify>

登录组件（在ngOnInit中注入SnotifyService并调用Snotify）

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


import {AuthenticationService} from "../../services/authentication/authentication.service";
import {Login} from "../../models/login";
import {FrontendService} from "../../services/frontend/frontend.service";
import {ApiService} from "../../services/api/api.service";
import {SweetAlertService} from "../../services/sweetalert/sweet-alert.service";
import {SnotifyService} from 'ng-snotify';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {

    loginForm: FormGroup;

    constructor(private formBuilder: FormBuilder,
                private auth: AuthenticationService,
                private api: ApiService,
                private router: Router,
                private frontend: FrontendService,
                private sweetalert: SweetAlertService,
                private snotify: SnotifyService,) {
        this.sweetalert.closeSweetAlerts();
        this.createLoginForm();
    }

    ngOnInit() {
        this.snotify.success('Example body content', 'Example title', {
            timeout: 2000,
            showProgressBar: false,
            closeOnClick: false,
            pauseOnHover: true
        });
    }

    createLoginForm() {
        this.loginForm = this.formBuilder.group({
            'email': ['', [Validators.required, Validators.email]],
            'password': ['', Validators.required]
        });
    }

    submitLoginForm() {
        this.checkLogin(this.loginForm.value);
    }

    checkLogin(credentials: Login) {
        // debugger;
        this.frontend.showLoader("login-form-loader");

        this.api.post('login', credentials)
            .subscribe(
                data => {
                    this.loginForm.reset();
                    this.auth.login(data.api_token);
                    this.router.navigate(['dashboard']);
                },

                error => {
                    console.error(error);
                },

                () => {
                    this.frontend.hideLoader("login-form-loader");
                }
            );
    }

    //Getters
    get email() {
        return this.loginForm.get('email')
    }

    get password() {
        return this.loginForm.get('password')
    }

}

Answer 1

我在app.module.ts上配置了ng-snotify，例如提到的DerZyklop。我导入

SnotifyModule

添加到app.module.ts中，并添加

{
  provide: 'SnotifyToastConfig',
  useValue: ToastDefaults
},
SnotifyService

到app.module.ts中的提供者

在ng-snotify, No notification appears on route change上查看我的答案

让我知道是否有帮助

NgSnotify没有显示祝酒词

1 个答案: