Использование ngx-toastr глобально в угловом приложении - PullRequest
Новая
       18

Использование ngx-toastr глобально в угловом приложении

0 голосов
/ 02 апреля 2019

Я использую следующую реализацию toastr в своем приложении Angular 7: https://www.npmjs.com/package/ngx-toastr

Я пытаюсь выяснить, как сделать так, чтобы все тосты добавлялись к телу, или другой элемент div, который будет в моем корневом компоненте приложения (я хочу, чтобы они отображались даже в том случае, если компонент, из которого они называются будут уничтожены).

Есть ли способ заархивировать его?

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Как уже указано в файле readme в вашей ссылке, вам необходимо предоставить собственный ToastrContainer. 

import { 
    ToastrModule, 
    ToastContainerModule // Add this one
} from 'ngx-toastr';


@NgModule({
  declarations: [AppComponent],
  imports: [
    //...
    ToastContainerModule // Add this one
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

И добавьте div к своему корневому компоненту (или к тому месту, где вы хотите, чтобы контейнер находился) следующим образом: 

@Component({
  selector: 'app-root',
  template: `
  <h1><a (click)="onClick()">Click</a></h1>
  <div toastContainer></div> <!-- Add this line here, above should be your router -->
`
})
export class AppComponent implements OnInit {
  // Get a reference to the directive
  @ViewChild(ToastContainerDirective) toastContainer: ToastContainerDirective;

  constructor(private toastrService: ToastrService) {}
  ngOnInit() {
    // Register the container
    this.toastrService.overlayContainer = this.toastContainer;
  }
  onClick() {
    this.toastrService.success('in div');
  }
}
0 голосов
/ 02 апреля 2019

Объявите модуль в вашем корневом модуле (обычно app.module.ts) 

import { ToastrModule } from 'ngx-toastr';

@NgModule({
    imports: [ ToastrModule.forRoot({ ...global options... }) ],
    ...
})

Тосты можно вызывать где угодно (если вы добавили службу в свой компонент) и должны отображаться гдеВы определили их для отображения (и что ни один элемент не покрывает их).

...