角度通知程序未显示

Question

我正在尝试使用 angular-notifier(version : 4.1.1) 在单击按钮后显示通知。

我从这个网站提到这样做。

即使在按钮单击后，通知也没有显示。

你能帮帮我吗？

以下是我使用的文件：

在app.module.ts 中：

const customNotifierOptions: NotifierOptions = {
    position: {
        horizontal: {
            position: 'left',
            distance: 12
        },
        vertical: {
            position: 'bottom',
            distance: 12,
            gap: 10
        }
    },
    theme: 'material',
    behaviour: {
        autoHide: 5000,
        onClick: false,
        onMouseover: 'pauseAutoHide',
        showDismissButton: true,
        stacking: 4
    },
    animations: {
        enabled: true,
        show: {
            preset: 'slide',
            speed: 300,
            easing: 'ease'
        },
        hide: {
            preset: 'fade',
            speed: 300,
            easing: 'ease',
            offset: 50
        },
        shift: {
            speed: 300,
            easing: 'ease'
        },
        overlap: 150
    }
};
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatExpansionModule,
    NotifierModule.withConfig(customNotifierOptions),
    NgbModule,
    PageHeaderModule,
    Ng2SmartTableModule,
    LanguageTranslationModule,
    DemoMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.ts 中：

@Component({
    selector: 'app-comp',
    templateUrl: './apps.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    notifier: NotifierService;

    constructor( notifier: NotifierService) {
        this.notifier = notifier
    }
    show() {
        this.notifier.notify('success', 'Notification successfully opened.');
    }
    ngOnInit() {
    }
}

在app.component.html

<button class="pull-right btn top-search-btn"  (click)="show()">Show</button>

Answer 1

根据你的源代码，您没有添加<notifier-container></notifier-container>的app.component.html，所以你app.component.html应该是这样的

<notifier-container></notifier-container>
<button class="pull-right btn top-search-btn" (click)="show()">Show</button>

您必须为通知添加容器，如https://github.com/dominique-mueller/angular-notifier#2-use-the-notifier-container-component 中所述

它们具有与不同版本的 angular 兼容的不同版本，请在此处查看此列表https://github.com/dominique-mueller/angular-notifier#angular-versions

注意：请导入他们的样式表以及他们在此处描述的内容https://github.com/dominique-mueller/angular-notifier#3-import-the-styles