Início / coding / Perguntas / 79564523
Accepted
Nathan30
Asked: 2025-04-09 21:53:55 +0800 CST

Componente angular, não atualiza o frontend

  • 772

Tenho um componente de chatbot que carrego em meu app.component.html para acessá-lo em qualquer lugar.

<app-chatbot [enable]="this.enableSerenia"></app-chatbot>

No meu componente chatbot, tenho várias variáveis ​​acessíveis de fora usando @Input();

export class ChatbotComponent implements OnChanges {
    @Input() enable: boolean = false;
    @Input() actionsList: any[] = [];
    @Input() messagesList: any[] = [];
    @Input() showDialog: boolean = false;
    @Input() newNotification: boolean = false;
}

Em outro componente, preciso atualizar algumas dessas variáveis ​​do chatbot. Então, declaro isso no meu outro construtor de componente e atualizo a variável assim:

constructor(
    private serenia: SereniaChatbotComponent // EDISSYUM - NCH01 Implémentation SerenIA
) {
    this.serenia.newNotification = true;
}

Mas a variável não é atualizada no meu frontend. O que preciso para "atualizar" meu frontend quando atualizo a variável do meu chatbot a partir de outro componente?

Estou no Angular 16

angular

1 respostas

  1. Best Answer

    Crie um serviço específico para o chatbot. Certifique-se de que ele seja fornecido na raiz para que seja acessível de qualquer lugar do seu aplicativo.

    Inicializamos um assunto e um observável. O motivo disso é acionar a detecção de alterações no componente do chatbot.

    @Injectable({ providedIn: 'root' })
export class ChatBotService {
    private subject: Subject<void> = new Subject<void>();
    private chatObs$: Observable<void> = this.subject.asObservable();

    enable: boolean = false;
    actionsList: any[] = [];
    messagesList: any[] = [];
    showDialog: boolean = false;
    newNotification: boolean = false;

    refresh() {
      this.subject.next();
    }
}

    Use o ChatBotServicecomponente no aplicativo. Nós usamos

    export class AppComponent {
  public chatBotService = inject(ChatBotService);
}

    Em seguida, vincule essas propriedades de serviço no componente do aplicativo.

    <app-chatbot [enable]="chatBotService.enableSerenia"></app-chatbot>

    Talvez você não veja os valores atualizados, então precisamos acionar a detecção de alterações no componente do chatbot. Usamos o observável que criamos anteriormente para fazer isso.

    @Component({ ... })
export class ChatBotComponent {
  private sub = new Subscription();
  private cdr = inject(ChangeDetectorRef);
  ...
  constructor() {
    this.sub.add(
      this.chatBotService.chatObs$.subscribe(() => {
        this.cdr.detectChanges();
      })
    );
  }
  ...
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

    Agora basta modificar os valores de qualquer lugar do seu aplicativo e deverá funcionar.

    @Component ({ ... })
export class SomeComponent {
  private chatBotService = inject(ChatBotService);
  
  constructor() {
    this.chatBotService.enable = true;
    this.chatBotService.refresh(); // trigger change detection so the values are refreshed.
  }
    • 2

relate perguntas