填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

EventEmitter

用在帶有 @Output 指令的元件中,以同步或非同步方式發出自訂事件,並透過訂閱實例來為這些事件註冊處理器。

Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.

      
      class EventEmitter<T> extends Subject {
  constructor(isAsync?: boolean): EventEmitter<T>
  emit(value?: T): void
  subscribe(generatorOrNext?: any, error?: any, complete?: any): Subscription
}
    

參見

建構函式

建立此類別的實例,該實例可以同步或非同步傳送事件。

Creates an instance of this class that can deliver events synchronously or asynchronously.

constructor(isAsync?: boolean): EventEmitter<T>
      
      constructor(isAsync?: boolean): EventEmitter<T>
    
引數
isAsync boolean

When true, deliver events asynchronously.

可選. 預設值是 `false`.
返回值

EventEmitter<T>

方法

發出包含給定值的事件。

Emits an event containing a given value.

emit(value?: T): void
      
      emit(value?: T): void
    
引數
value T

要發出的值。

The value to emit.

可選. 預設值是 `undefined`.
返回值

void

註冊此實例發出的事件的處理器。

Registers handlers for events emitted by this instance.

subscribe(generatorOrNext?: any, error?: any, complete?: any): Subscription
      
      subscribe(generatorOrNext?: any, error?: any, complete?: any): Subscription
    
引數
generatorOrNext any

如果提供,則為所發出事件的自訂處理器。

When supplied, a custom handler for emitted events.

可選. 預設值是 `undefined`.
error any

如果提供,則為這裡發出的錯誤通知的自訂處理器。

When supplied, a custom handler for an error notification from this emitter.

可選. 預設值是 `undefined`.
complete any

如果提供,則為這裡發出的完成通知的自訂處理器。

When supplied, a custom handler for a completion notification from this emitter.

可選. 預設值是 `undefined`.
返回值

Subscription

使用說明

透過新增 emit() 方法來擴充套件 Angular 的 RxJS Subject

Extends RxJS Subjectfor Angular by adding the emit() method.

在以下示例中,元件定義了兩個建立事件發射器的輸出屬性。單擊標題後,發射器將發出開啟或關閉事件以切換當前可見性狀態。

In the following example, a component defines two output properties that create event emitters. When the title is clicked, the emitter emits an open or close event to toggle the current visibility state.

@Component({ selector: 'zippy', template: ` <div class="zippy"> <div (click)="toggle()">Toggle</div> <div [hidden]="!visible"> <ng-content></ng-content> </div> </div>`}) export class Zippy { visible: boolean = true; @Output() open: EventEmitter<any> = new EventEmitter(); @Output() close: EventEmitter<any> = new EventEmitter(); toggle() { this.visible = !this.visible; if (this.visible) { this.open.emit(null); } else { this.close.emit(null); } } }
      
      @Component({
  selector: 'zippy',
  template: `
  <div class="zippy">
    <div (click)="toggle()">Toggle</div>
    <div [hidden]="!visible">
      <ng-content></ng-content>
    </div>
 </div>`})
export class Zippy {
  visible: boolean = true;
  @Output() open: EventEmitter<any> = new EventEmitter();
  @Output() close: EventEmitter<any> = new EventEmitter();

  toggle() {
    this.visible = !this.visible;
    if (this.visible) {
      this.open.emit(null);
    } else {
      this.close.emit(null);
    }
  }
}
    

Access the event object with the $event argument passed to the output event handler:

<zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>
      
      <zippy (open)="onOpen($event)" (close)="onClose($event)"></zippy>