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 
   
    
     
      
     
    
    
    scenario1: 
    [saveFormObs]="saveButtonEventEmitter" 
    这种类似[saveButton]="false"等于给变量赋值. 
    privatesaveButtonEventEmitter:EventEmitter<any>=newEventEmitter<any>(); 
    saveButtonEventEmitter是一个Observable类.saveButtonEventEmitter.emit产生Observable事件 
    this.saveFormObs 
    .takeUntil(this.onDestroy$) 
    .subscribe(()=>{//subscribelisten这个Observable事件 
    this.saveForm(true); 
    }); 
    
  
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等)的处理.

 
     
   
FileUpload=__decorate([
core_1.Component({
selector:'fileUpload',
template:"\n[ngStyle]=\"style\"[class]=\"styleClass\"*ngIf=\"mode==='advanced'\(drop)=\"onDrop($event)\"...">\n
.....
}),
],FileUpload);
FileUpload.prototype.onDrop=function(event){
this.onFileSelect(event);
};
FileUpload.prototype.onFileSelect=this.upload();
}
FileUpload.prototype.upload=function(){
//发送emit到cer.html
this.uploadHandler.emit({
files:this.files
});
cer.html:
<p-fileUpload#installCertFileUpload
//uploadHandler等着emit,收到emit,对应的函数onInstallCertFileSelected就执行.
(uploadHandler)="onInstallCertFileSelected($event)"
</p-fileUpload>
cer.ts:
privateonInstallCertFileSelected(event):void{
//具体实现功能
//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;
        }
      });
}

如果将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
  });

emit,EventEmitter,subscribe,next,subject 使用

猜你在找的Angularjs相关文章