如何在Angular 7中从服务访问组件

时间:2019-01-08 18:20:02

标签: angular primeng angular-services

我在Angular 7应用程序中使用PrimeNG库,并且对它们如何实现功能感到好奇。我会尽力解释:

其组成部分之一是“吐司”,它以弹出样式显示短信,如下所示:

enter image description here

要使其正常工作,您需要在模板中定义一个from celery.app import Celery app = Celery(broker_url='amqp://admin:mypass/rabbit:56772') app.send_task(name='messages.tasks.longtime_add', kwargs={}) 组件:

p-toast

并使用以下方法提供全局<p-toast></p-toast> 来显示消息:

MessageService

我的问题是,他们如何从this.messageService.add({severity:'success', summary:'Service Message', detail:'Via MessageService'}); 服务的p-toast方法中找到add组件?例如,我已经在MessageService模板中插入了p-toast,并且无论层次结构如何,我都可以从应用程序的所有组件中使用app-component.html。注意:我还将在messageService.add文件的MessageService部分中声明providers,以使服务成为全局服务。

我希望这是可以理解的...谢谢!

2 个答案:

答案 0 :(得分:0)

您需要创建定制服务并将其订阅以显示吐司。 DEMO

customize-message.service.ts

@Injectable()
export class CustomizeMessageService {

  private loaderSubject = new Subject<MessageState>();
  loaderState = this.loaderSubject.asObservable();

  constructor() { }

  show() {
    this.loaderSubject.next(<MessageState>{ show: true });
  }

}

export interface MessageState {
  show: boolean;
}

app.component.html

<p-toast [style]="{marginTop: '80px'}"></p-toast>

app.component.ts

constructor(private messageService: MessageService, private loaderService: CustomizeMessageService) { }

  ngOnInit() {
    this.loaderService.loaderState.subscribe((state: MessageState) => {
      if (state.show) {
      this.messageService.add({severity:'success', summary: 'Success Message', detail:'Order submitted'});
      }
    });
  }

another.component.ts

constructor(private customizeMessageService: CustomizeMessageService) {}
showToast() {
    this.customizeMessageService.show();
}

答案 1 :(得分:0)

如答案所示,每个p-toast组件都有一个全局服务MessageService的订户,以接收要显示的消息。