No artigo anterior, mencionamos que o
serviço não só pode ser usado para processar solicitações de API, mas também tem outros usos
, como a implementação de notification das quais falaremos neste artigo. [Tutoriais relacionados recomendados: "Tutorial Angular"]
As renderizações são as seguintes:
A IU pode ser ajustada posteriormente
, então vamos detalhar passo a passo.
Para adicionar um serviço,
adicionamos o arquivo de serviço notification.service.ts em app/services (use a linha de comando para gerá-lo) e adicionamos conteúdo relacionado:
//notification.service.ts
importar {Injetável} de '@angular/core';
importar {Observável, Assunto} de 'rxjs';
// Enumeração do status da notificação export enum NotificationStatus {
Processo = "progresso",
Sucesso = "sucesso",
Falha = "falha",
Terminado = "terminado"
}
@Injetável({
fornecidoIn: 'root'
})
classe de exportação NotificationService {
notificação privada: Assunto<NotificationStatus> = new Assunto();
mensagem públicaObj: qualquer = {
primário: '',
secundário: ''
}
// Converte para um público observável getNotification(): Observable<NotificationStatus> {
retorne this.notify.asObservable();
}
// Notificação em andamento public showProcessNotification() {
this.notify.next(NotificationStatus.Process)
}
// Notificação de sucesso public showSuccessNotification() {
this.notify.next(NotificationStatus.Success)
}
//Termina notificação public showEndedNotification() {
this.notify.next(NotificationStatus.Ended)
}
// Alterar informações public changePrimarySecondary(primary?: string,secondário?:string) {
this.messageObj.primary = primário;
this.messageObj.secondary = secundário
}
construtor() { }
} É fácil de entender...
Transformamos notify em um objeto observável e depois publicamos várias informações de status.
Para criar um componente,
criamos um novo componente notification em app/components onde os componentes públicos são armazenados. Então você obterá a seguinte estrutura:
notificação ├── notificação.component.html // Esqueleto da página ├── notificação.component.scss // Estilo exclusivo da página ├── notificação.component.spec.ts // Arquivo de teste └── notificação.component.ts // Em no arquivo javascript
definimos o esqueleto da notification :
<!-- notificação.component.html -->
<!--Suporte para fechamento manual de notificações-->
<button (click)="closeNotification()">Fechar</button>
<h1>Conteúdo do lembrete: {{ mensagem }}</h1>
<!-- Personalize as principais informações de notificação-->
<p>{{primaryMessage }}</p>
<!-- Personalizar informações de notificação secundária-->
<p>{{secondaryMessage }}</p> Em seguida, simplesmente modificamos o esqueleto e adicionamos o seguinte estilo:
//notification.component.scss
:hospedar {
posição: fixa;
topo: -100%;
direita: 20px;
cor de fundo: #999;
borda: 1px sólido #333;
raio da borda: 10px;
largura: 400px;
altura: 180px;
preenchimento: 10px;
// Preste atenção ao conteúdo de active aqui Ele só aparece quando aparece uma notificação &.active {.
superior: 10px;
}
&.sucesso{}
&.progresso {}
&.falha {}
&.terminado {}
} Os quatro nomes de classe de success, progress, failure, ended correspondem à enumeração definida pelo serviço de notificação. Você pode adicionar estilos relacionados de acordo com suas próprias preferências.
Finalmente, adicionamos o código javascript comportamental.
//notificação.component.ts
importar {Component, OnInit, HostBinding, OnDestroy} de '@angular/core';
//Novo ponto de conhecimento rxjs
importar {Assinatura} de 'rxjs';
importe {debounceTime} de 'rxjs/operadores';
//Introduzir serviços relacionados import { NotificationStatus, NotificationService } from 'src/app/services/notification.service';
@Componente({
seletor: 'notificação de aplicativo',
templateUrl: './notification.component.html',
styleUrls: ['./notification.component.scss']
})
classe de exportação NotificationComponent implementa OnInit, OnDestroy {
// Tempo anti-vibração, somente leitura private somente leitura NOTIFICATION_DEBOUNCE_TIME_MS = 200;
notificação protegidaSubscrição!: Assinatura;
temporizador privado: qualquer = nulo;
mensagem pública: string = ''
// mapeamento do serviço de notificação de informações de enumeração private reflectObj: any = {
progresso: "em andamento",
sucesso: "sucesso",
falha: "falha",
terminou: "fim"
}
@HostBinding('class') notificaçãoCssClass = '';
mensagem primária pública!: string;
mensagem secundária pública!: string;
construtor(
serviço de notificação privado: NotificationService
) { }
ngOnInit(): void {
isto.init()
}
inicialização pública() {
//Adicionar informações de assinatura relevantes this.notificationSubscription = this.notificationService.getNotification()
.cano(
debounceTime(this.NOTIFICATION_DEBOUNCE_TIME_MS)
)
.subscribe((notificationStatus: NotificationStatus) => {
if(statusdenotificação) {
this.resetTimeout();
//Adicionar estilos relacionados this.notificationCssClass = `active ${ warningStatus }`
this.message = this.reflectObj[notificationStatus]
// Obtenha a mensagem primária personalizada this.primaryMessage = this.notificationService.messageObj.primary;
// Obtenha informações secundárias personalizadas this.secondaryMessage = this.notificationService.messageObj.secondary;
if(notificationStatus === NotificationStatus.Process) {
this.resetTimeout()
este.timer = setTimeout(() => {
this.resetView()
}, 1000)
} outro {
this.resetTimeout();
este.timer = setTimeout(() => {
this.notificationCssClass = ''
this.resetView()
}, 2000)
}
}
})
}
private resetView(): void {
esta.mensagem = ''
}
// Fecha o cronômetro private resetTimeout(): void {
if(este.temporizador) {
clearTimeout(this.timer)
}
}
// Fechar notificação public closeNotification() {
this.notificationCssClass = ''
this.resetTimeout()
}
// Componente é destruído ngOnDestroy(): void {
this.resetTimeout();
//Cancelar todas as mensagens de assinatura this.notificationSubscription.unsubscribe()
}
} Aqui, apresentamos o ponto de conhecimento de rxjs . RxJS é uma biblioteca de programação reativa que usa Observables , o que torna mais fácil escrever código assíncrono ou baseado em retorno de chamada. Esta é uma ótima biblioteca e você aprenderá mais sobre ela nos próximos artigos.
Aqui usamos a função anti-shake debounce . Função anti-shake significa que depois que um evento é acionado, ele só pode ser executado uma vez após n segundos. Se o evento for acionado novamente em n segundos, o tempo de execução da função será. recalculado. Simplificando: quando uma ação é acionada continuamente, apenas a última vez é executada.
ps: função de
throttle: restringe uma função a ser executada apenas uma vez dentro de um determinado período de tempo .
Durante a entrevista, o entrevistador gosta de perguntar...
Chamando
Como este é um serviço global, chamamos este componente em app.component.html :
// app.component.html <router-outlet></router-outlet> <app-notification></app-notification>
Para facilitar a demonstração, adicionamos um botão em user-list.component.html para acionar facilmente a demonstração:
// user-list.component.html <button (click)="showNotification()">click show warning</button>
aciona o código relevante:
// user-list.component.ts
importar {NotificationService} de 'src/app/services/notification.service';
// ...
construtor(
serviço de notificação privado: NotificationService
) { }
//Mostra notificação showNotification(): void {
this.notificationService.changePrimarySecondary('Informação primária 1');
this.notificationService.showProcessNotification();
setTimeout(() => {
this.notificationService.changePrimarySecondary('Informação primária 2', 'Informação secundária 2');
this.notificationService.showSuccessNotification();
}, 1000)
} Neste ponto, terminamos, simulamos com sucesso a função notification . Podemos modificar componentes de serviços relacionados de acordo com as necessidades reais e personalizá-los para atender às necessidades do negócio. Se estivermos desenvolvendo um sistema para uso interno, é recomendável usar bibliotecas de UI maduras. Elas nos ajudaram a encapsular vários componentes e serviços, economizando muito tempo de desenvolvimento.