代码之家 › 专栏 › 技术社区 › DaveC426913

角度2:使用服务广播事件

eventemitter service angular

28

DaveC426913 · 技术社区 · 9 年前

我试图在一个组件中点击一个按钮,将焦点放在另一个组件上的一个元素上。(坦率地说,我不理解为什么这一定如此复杂,但我还没有实现任何实际可行的更简单方法。)

那个发生了单击。我不确定听力部分是如何响应事件的。

应用程序组件:

跳到主要内容

import { Component } from '@angular/core';
import { SkipToContentService } from './services/skip-to-content.service';


export class AppComponent {
    constructor(
        private skipToContent: SkipToContentService
    ) {}
    }

    skipLink() {
        this.skipToContent.setClicked();
    }

}

登录组件:

<input type="text" name="username" />


import { Component, OnInit } from '@angular/core';
import { SkipToContentService } from '../../../services/skip-to-content.service';

export class BaseLoginComponent implements OnInit {

    constructor(
        private skipToContent: SkipToContentService
        ) {
    }

    ngOnInit() {
        this.skipToContent.skipClicked.subscribe(
            console.log("!")
            // should put focus() on input
        );

    }
}

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class SkipToContentService {

    skipClicked: EventEmitter<boolean> = new EventEmitter();


    constructor() {
    }

    setClicked() {
        console.log('clicked');
        this.skipClicked.emit();
    };
}

我在这里有点不知道登录将如何“听到”skipClicked事件。

2 回复 | 直到 9 年前

1

25

FAISAL 6 年前

首先,使用 BehaviorSubject 而不是 EventEmitter .更改声明 skipCliekd

skipClicked: BehaviorSubject<boolean> = new BehaviorSubject(false);

然后,您需要使用 next() 方法如下:

this.skipClicked.next (true);

此外,请将订阅更改为:

 this.skipToContent.skipClicked.subscribe( value => {
     if (value === true) {
         console.log("!"); 
         // should put focus() on input 
     }
 });

2

16

Community Mohan Dere 6 年前

EventEmitter只能在具有@Output指令的实际组件中使用。其他任何事情在未来都可能行不通。

对于亲子沟通,最好使用主题或行为主题。这是角导轨的一个示例。

https://angular.io/guide/component-interaction

@Injectable()
export class MissionService {

  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();

  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();

  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }

  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }
}

提示:

Subject<void>() next() 更干净,您不需要为此提供虚拟值。

windowClosed = new Subject<void>();

windowClosed.next() 将发出事件