如何在不刷新整页的情况下更新组件-Angular

  • Z时代
  • 2024-01-10
  • 分类：问答

我的页面结构是：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

如何在app-header不刷新整个页面的情况下更新/刷新组件？

一旦用户成功登录，我想在标题中隐藏“登录”链接。标题在所有组件/路由中都是通用的。

回答：

您可以使用 来在整个应用程序的不同组件之间进行通信。您可以定义一个数据共享服务，其中包含

您可以订阅和发出更改的服务。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataSharingService {
    public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}

在您的 提供商条目中添加。

接下来，将导入到DataSharingService您<app-header>和您在其中执行登录操作的组件中。在<app-

header>订阅isUserLoggedIn主题更改中：

import { DataSharingService } from './data-sharing.service';
export class AppHeaderComponent { 
    // Define a variable to use for showing/hiding the Login button
    isUserLoggedIn: boolean;
    constructor(private dataSharingService: DataSharingService) {
        // Subscribe here, this will automatically update 
        // "isUserLoggedIn" whenever a change to the subject is made.
        this.dataSharingService.isUserLoggedIn.subscribe( value => {
            this.isUserLoggedIn = value;
        });
    }
}

在您的<app-header>html模板中，您需要添加*ngIf条件，例如：

<button *ngIf="!isUserLoggedIn">Login</button> 
<button *ngIf="isUserLoggedIn">Sign Out</button>

最后，您只需要在用户登录后发出事件，例如：

someMethodThatPerformsUserLogin() {
    // Some code 
    // .....
    // After the user has logged in, emit the behavior subject changes.
    this.dataSharingService.isUserLoggedIn.next(true);
}

以上是 如何在不刷新整页的情况下更新组件-Angular 的全部内容， 来源链接： utcz.com/qa/423954.html

回到顶部