Question

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

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

我有一个Login Component，用于检查UserCredentials是否有效，并在header-navigation-service中设置Login方法（flag = true，loggedInName = username）。

header.component.ts：-

showHeader:HeaderData;
  ngOnInit() {

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

  });


  }

现在我正在订阅isLoggedIn（），但是我不想订阅它，因为我没有操纵数据，而是只想使用Angular异步来检索数据并在我的视图中显示。 / p>

Answer 1

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

只需在标头组件中使用Obserable变量

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

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

在HTML中使用Observable变量isLoggedIn $

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

更改登录功能

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

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

1 个答案: