主页 / coding / 问题 / 79564523
Accepted
Nathan30
Asked: 2025-04-09 21:53:55 +0800 CST

角度组件，不更新前端

  • 772

我有一个聊天机器人组件，我在 app.component.html 中对其进行充电以便在任何地方访问它。

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

在我的聊天机器人组件中，我有多个可以使用从外部访问的变量@Input()；

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

在另一个组件中，我需要更新一些聊天机器人变量。因此，我在另一个组件的构造函数中声明了它，并像这样更新变量：

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

但是该变量在我的前端没有更新。当我从另一个组件更新聊天机器人变量时，我需要如何“更新”我的前端？

我使用的是 Angular 16

angular

1 个回答

  1. Best Answer

    为聊天机器人创建专用服务。确保该服务位于根目录中，以便可以从应用程序中的任何位置访问它。

    我们初始化一个主题和一个可观察对象，这样做的原因是为了触发聊天机器人组件中的变化检测。

    @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();
    }
}

    ChatBotService在应用组件中使用。我们使用

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

    然后在应用程序组件中绑定此服务属性。

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

    您可能看不到值刷新，因此我们需要从聊天机器人组件触发变更检测。我们使用之前创建的可观察对象来实现这一点。

    @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();
  }
}

    现在只需从应用程序中的任何位置修改值即可。

    @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

相关问题