如何使用自定义数据类型实现异步管道

Question

我是 Angular 的新手，并且一直在开发自己的应用程序以提高我的技能。在此过程中，我遇到了异步管道，但在为自定义类型实现它们时遇到了一些困难。 代码如下：-

header-model.ts

export class HeaderData
{
    flag:boolean=false;
    loggedInName:string='';

    constructor(f,n)
    {
        this.flag=f;
        this.loggedInName=n;
    }
}

header-navigation-service.ts:-

 export class NavigationService
{
private loggedIn=new BehaviorSubject<HeaderData>(new HeaderData(false,''));

get isLoggedIn()
{
    return this.loggedIn.asObservable();
}

 login(val:HeaderData)

{
    if(val.flag==true)
    {
        console.log('In service -> '+val);
        const val1=new HeaderData(val.flag,val.loggedInName);
        this.loggedIn.next(val1);
    }
}
}

我有一个登录组件，它检查 UserCredentials 是否有效并在 header-navigation-service 中设置登录方法(flag=true,loggedInName=username)。

header.component.ts:-

showHeader:HeaderData;
  ngOnInit() {

    this._headerNavigation.isLoggedIn.subscribe((data:HeaderData)=>
  {
this.showHeader=data;

  });


  }

现在我订阅了 isLoggedIn()，但我不想订阅它，因为我没有操作数据，我只想利用 Angular 异步来检索数据并显示在我的视图中。

Answer 1

您的实现看起来不错。您只需要进行一些更改。

1. 只需在 header 组件中使用 Obserable 变量

  isLoggedIn$; // Observable variable will be used by async.

  ngOnInit() {
      this.isLoggedIn$ = this._headerNavigation.isLoggedIn;
  }

1. 在 HTML 中使用 Observable 变量 isLoggedIn$

<span>{{isLoggedIn$ | async}}</span>

1. 登录功能变更

login(val:HeaderData) {
      console.log('In service -> '+val);
      const val1=new HeaderData(val.flag,val.loggedInName);
      this.loggedIn.next(val1);
}