штрих-тост в компоненте приложения не отображает сообщения, отправленные другими компонентами - PullRequest
Новая
       3

штрих-тост в компоненте приложения не отображает сообщения, отправленные другими компонентами

2 голосов
/ 24 апреля 2019

Чтобы уменьшить количество основных компонентов тоста (p-toast) в моем веб-приложении, я попытался использовать центральный p-тост с ключом в app.component.Затем я добавляю сообщения от других компонентов, используя службу сообщений с ключом этого компонента toast.К сожалению, тосты не отображаются.

my app.component.html 

<div>
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer *ngIf="!userLoggedIn"></app-footer>
</div>
<p-toast [style]="{ marginTop: '80px' }" key="myToast"></p-toast>

my app.component.ts 

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

  constructor(
    private readonly messageService: MessageService
  ) {...

внутри компонента (показаночерез routeroutlet) Я добавляю сообщение: 

  this.messageService.add({
    severity: 'success',
    summary: 'Success Message',
    key: 'myToast',
    detail: 'Order submitted'
  });

Я также попробовал следующие варианты: 

this.ngZone.run(() => {
  this.messageService.add({
    severity: 'success',
    summary: 'Success Message',
    key: 'myToast',
    detail: 'Order submitted'
  });
});

и 

setTimeout(() => {
  this.messageService.add({
    severity: 'success',
    summary: 'Success Message',
    key: 'myToast',
    detail: 'Order submitted'
  });
}, 1000);

Ничего из этого не работает.

Я что-то забыл?Или p-тост не используется таким образом?

1 Ответ

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

Вам просто нужно изменить еще несколько вещей

1) Добавить ToastModule в список импорта AppModule

2) Добавить MessageService в список поставщиков AppModule

3)Удалите MessageService из массива провайдеров в любом другом компоненте, вы все равно можете импортировать MessageService и сделать this.messageService.add из любого компонента

Затем попробуйте его

...