emit,EventEmitter,subscribe,next,subject 使用

前端之家收集整理的这篇文章主要介绍了emit,EventEmitter,subscribe,next,subject 使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
 
 

目录:

1 EventEmitter 介绍

2 subscribe 介绍

3 Subject 介绍

4 应用: Angular 组件之间通讯

5 公司项目

6 history

1EventEmitter 介绍

EventEmitter 是封装的Observable类

export class Subject<T> extends Observable<T>
export declare class EventEmitter<T> extends Subject<T>

EventEmitter 2种用法:一个emit 是@input,一个是@output

  1. scenario1:
  2. [saveFormObs]="saveButtonEventEmitter"
  3. 这种类似[saveButton]="false"等于给变量赋值.
  4. privatesaveButtonEventEmitter:EventEmitter<any>=newEventEmitter<any>();
  5. saveButtonEventEmitter是一个Observable类.saveButtonEventEmitter.emit产生Observable事件
  6. this.saveFormObs
  7. .takeUntil(this.onDestroy$)
  8. .subscribe(()=>{//subscribelisten这个Observable事件
  9. this.saveForm(true);
  10. });
scenario2:
@Output()changed=newEventEmitter<string>();
  • click(){
  • //triggerObservableevent.
  • this.changed.emit('hi~');
  • }
  • @Component({
  • //(changed)类似(onBlur),作为一种event.event调用绑定的subscribe函数.
  • template:`<comp(changed)="subscribe($event)"></comp>`
  • })
  • exportclassHomeComponent{
  • subscribe(message:string){
  • //接收:hi~
  • }
  • 类似公司项目原理一样
    @Output()onFormInitialized:EventEmitter<boolean>=newEventEmitter<boolean>();
  • //triggerObservableevent.
  • this.onFormInitialized.emit(//event绑定处理函数
  • (onFormInitialized)="handleFormInitialized($event)"
  • 2: subscribe介绍:

    subscribe 表示监听

    2.1 那么什么会trigger这个listen呢,

    1)Observable 变量(Observable.emit trigger)

    @Input() saveFormObs: Observable<any>;

    this.saveFormObs //
             .takeUntil(this.onDestroy$)
             .subscribe(()

    2)有控件变化

    this.authPwCtrl.valueChanges
        .takeUntil(this.destroyMe$)
        .debounceTime(100)
        .subscribe((value) =>

    2.2: subscribe 是订阅,有变化就发送后台。next是接收后台的返回数据.,

    基本套路,emit(or click etc event)--subscribe--next(onCompleted,onError,onNext.处理返回值)

     
     
    conferenceSubscription = confSvc.getConferenceObservables()
    				.getConnectionObservable()
    				.getObservable()
    				.subscribe(new Observer<Connection>() {
    					private ConnectionState currentState;
    					@Override
    					public void onCompleted() {
    					}
    					@Override
    					public void onError(Throwable e) {
    					}
    					@Override
    					public void onNext(Connection connection) {
    						//The onNext() will be invoked many times with same connection state
    						//Only need to print when the state changed
    						if(connection.getState() != currentState){
    							currentState = connection.getState();
    							onChange(connection,connection.getState());
    						}
    					}
    				});

    3: subject 介绍

    subject 这个东西,挺厉害既可以当成observable 又可以当成observer.

    用法: var subject = new Rx.Subject();

    //subject等于getConnectionObservable,相当于observable
    var subscription = subject.subscribe(
        x => console.log('onNext: ' + x),e => console.log('onError: ' + e.message),() => console.log('onCompleted'));
    	}
    //subject 等于 getConnectionObservable.subscribe 相当于observer
    subject.onNext(1);
    // => onNext: 1
    subject.onNext(2);
    // => onNext: 2
    subject.onCompleted();
    // => onCompleted	
    
    this.saveRequest$.next ({
    		control: this.control as PFormControl,options: options
    		} as ControlSaveRequest);

    this.saveRequest$.next 和this.saveRequest$.onNext是一样的

    4 应用: Angular 组件之间通讯

    http://www.cnblogs.com/zheng-chuang/p/7418295.html

    https://zhouhao.me/2017/09/17/communication-between-component/

    上面两篇文章划重点,

    1) 父子组件通讯
    在同一个文件or import ChildComponent(Child.ts)
    只用emit,@Output,连subscribe都没用
    @Output() //发起是Output

    public follow=new EventEmitter<string>();

    //调用关系

    (click)="emitAnEvent()"//父组件触发---this.follow.emit("follow emit");//emit----(follow)="doSomething()" //child(follow)接收,doSomething处理业务
    note: 可以通过入参传递内容
    2) 没有父子关系的组件通讯
    child-1,child-2 都用公共的service,一个向service push message,另一个subscribe service message.
    @Injectable()//因为child-1.ts 要使用另一个ts文件,event-bus.service.ts的变量,所以要Inject

    public eventBus:Subject<string> = new Subject<string>();//定义Subject for observable and observer

    //调用关系

    (click)="triggerEventBus()"//child-1组件触发---this.eventBusService.eventBus.next//在Subject的情况下这个next表示emit
    ---this.eventBusService.eventBus.subscribe((value)//child-2监听subscribe service获取push的message

    notes:OnDestory 要unsubscribe,否则会内存泄漏

    3) 例子缺点,对@Input使用没有说明

    5 公司项目

    这里例子和公司自定义封装html成标签fileUpload是一样的。
    button drop事件trigger "uploadHandler emit",然后uploadHandler绑定onInstallCertFileSelected.
    实现了回调函数从fileupload.js 调到certificate-table.html在到certificate-table.ts的调用关系
    比如:<fileUpload
    (uploadHandler)="onInstallCertFileSelected($event)">

    </fileUpload>

    fileupload.js
    自定义的fileUpload,就是一段html封装成了标签.fileUpload实际就是一个button控件以及button各种事件(比如drop等)的处理.

    1. FileUpload=__decorate([
    2. core_1.Component({
    3. selector:'fileUpload',
    4. template:"\n[ngStyle]=\"style\"[class]=\"styleClass\"*ngIf=\"mode==='advanced'\(drop)=\"onDrop($event)\"...">\n
    5. .....
    6. }),
    7. ],FileUpload);
    8. FileUpload.prototype.onDrop=function(event){
    9. this.onFileSelect(event);
    10. };
    11. FileUpload.prototype.onFileSelect=this.upload();
    12. }
    13. FileUpload.prototype.upload=function(){
    14. //发送emit到cer.html
    15. this.uploadHandler.emit({
    16. files:this.files
    17. });
    18. cer.html:
    19. <p-fileUpload#installCertFileUpload
    20. //uploadHandler等着emit,收到emit,对应的函数onInstallCertFileSelected就执行.
    21. (uploadHandler)="onInstallCertFileSelected($event)"
    22. </p-fileUpload>
    23. cer.ts:
    24. privateonInstallCertFileSelected(event):void{
    25. //具体实现功能
    26. //it is a httpput to upload file
      this._certService.installCertificate(formData).subscribe({
      next: (response) => {
      this.fetchInstalledCertificates(); // On a successful install,fetch the updated list of installed certificates.
      this._msgSvc.setMessage(this.STR_INSTALLCSRSUCCESS_MSG,this.SUCCESS_MESSAGE_TYPE);
      // Refresh the browser in event the server certificate was changed
      window.setTimeout(() => window.location.reload(false),this.BROWSER_RELOAD_DELAY_MS);
      },error: (error) => {
      this._logger.error('[CertificatesPage] Install certificates returned error',error);
      this._msgSvc.setMessage(this.STR_INSTALLCSRERROR_MSG,this.ERROR_MESSAGE_TYPE);
      },
      complete: () => {
      //stop progressbar for uploading
      this.uploadInProgress = false;
      }
      });
    27. }

    如果将FileUpload中的button写到cer.html中也可以实现。为什么要这么做呢?

    这样做,可以实现控件和具体业务分离,实现复用

    这样每个网页,都可以调用p-fileUpload,实现button以及upload进度条,每个网页加上自己的change 函数内容即可

    6 other: history

    html--ajax--promise---observable 技术进化过程
    这里主要以angularjs过渡到angular中使用RxJS为例。next应该是observer的.
    普通的Promise:
    对于一个普通的promise,我们一般处理如下:

    promise().then(
      ()=>{
        // success
      },()=>{
        // error
      });
    而在RxJS中,我们一般得到的是一个Observable(可观察对象),
    类似的像上面一样的处理被称为订阅,其实现如下:
    observable().subscribe(
      ()=>{
        // next
      },()=>{
        // error
      },()=>{
        // complete
      });
    原文链接:https://www.f2er.com/angularjs/144623.html

    猜你在找的Angularjs相关文章