Angular 从点击式事件订阅可观测数据的首选实践

我用Angular已经有一段时间了。最近，我一直在思考（并搜索）订阅一个

可观察的
比如
主题
的首选实践是什么，它将由某个DOM事件发出

例如（我认为这可能是一个整洁的实现？）


点击我！

//component.ts
...
类组件实现OnInit、OnDestroy{
public clickEvent$=新主题（）；
私有订阅=新订阅（）；
公共ngOnInit（）{
this.subscriptions.add（this.handleClick（this.clickEvent$）；
}
公共恩格德斯特罗（）{
此为.subscriptions.unsubscribe（）；
}
公共handleClick（主题：主题）：订阅{
返回subject.pipe（debounceTime（300））。订阅(
事件=>{
//做点什么
}
);
}
}
...

因此，我想知道是否有更好的或推荐的实施方案。如果是，请分享：）

点击我！
//服务台
@可注射（）
出口类服务{
私人任务通知来源：主题=新主题（）；
public readonly subjectoobservable$=this.missionAnnouncedSource.asObservable（）；
构造函数（）{}
公共设置错误（错误：字符串）：无效{
本.任务通知来源.下一个（任务）
}
}
//组件技术
类组件实现OnInit、OnDestroy{
私有主题$：主题=新主题（）；
公共使命：字符串
建造商（服务：服务）{
}
恩戈尼尼特（）{
this.service.subjecto可观察$
.烟斗(
takentill（this.destroySubject$）
)
.订阅（（任务）=>{
这个任务
})
}
公共clickEvent（$event）：无效{
this.service.setMission（“任务”）；
}
恩贡德斯特罗（）{
此.destroySubject$.next（）；
此.destroySubject$.complete（）；
}    
}

这是一种通过dom事件与主题进行通信的可能方式
这样做有什么特别的目的吗？@RafiHenig只是为了保持代码干净易懂。虽然这不是一种常见的情况，但随着主题数量的增加，订阅部分的代码可能会很重。。。
// component.ts

...
class Component implements OnInit, OnDestroy {
  public clickEvent$ = new Subject();

  private subscriptions = new Subscription();

  public ngOnInit() {
    this.subscriptions.add(this.handleClick(this.clickEvent$));
  }

  public ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }

  public handleClick<T>(subject: Subject<T>): Subscription {
    return subject.pipe(debounceTime(300)).subscribe(
      event => {
        // do something
      }
    );
  }

}
...

<!-- component.html -->
<div>
 <button (click)="clickEvent($event)">Click Me!</button>
</div>

//service.ts
@Injectable()
export class Service {
  private missionAnnouncedSource: Subject<string> = new Subject<string>();
  public readonly subjToObservable$ = this.missionAnnouncedSource.asObservable();
  
  constructor() { }

  public setMisson(misson: string): void {
     this.missionAnnouncedSource.next(mission)
  }
}

// component.ts
class Component implements OnInit, OnDestroy {
   private destroySubject$: Subject<void> = new Subject();
   public mission: string

   constructor(service: Service) {
   }

   ngOnInit() {
     this.service.subjToObservable$
       .pipe(
         takeUntill(this.destroySubject$)
       )
       .subscribe((mission) => {
         this.mission = mission
       })
   }

   public clickEvent($event):void {
      this.service.setMission('mission');
   }

   ngOnDestroy() {
     this.destroySubject$.next();
     this.destroySubject$.complete();
   }    
}