问题描述
我试图在一个组件中单击按钮以将焦点放在另一个组件上的元素上. (坦率地说,我不明白为什么它必须如此复杂,但是我无法实现任何更简单的实际工作方式.)
I'm trying to get a button click in one component to put focus on an element on another component. (Frankly, I don't understand why this must be so complex, but I have not been able to implement any simpler way that actually works.)
我正在使用服务.除了发生点击的 之外,不需要传递任何数据.我不确定侦听组件是如何响应事件的.
I'm using a service. It doesn't need to pass any data except that the click occurred. I'm not sure how the listening component is meant to respond to the event.
app.component:
app.component:
跳至主要内容
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事件,我有些困惑.
I'm a bit lost here as to how logon will "hear" the skipClicked event.
推荐答案
首先,使用BehaviorSubject
代替EventEmitter
.将skipCliekd
的声明更改为以下内容:
First of all, use a BehaviorSubject
instead of EventEmitter
. Change the declaration of skipCliekd
to the following:
skipClicked: BehaviorSubject<boolean> = new BehaviorSubject(false);
然后,您需要使用next()
方法广播新值,如下所示:
Then, you need to broadcast the new value using next()
method as following:
this.skipClicked.next (true);
此外,将您的订阅更改为:
Also, change your subscription to:
this.skipToContent.skipClicked.subscribe( value => {
if (value === true) {
console.log("!");
// should put focus() on input
}
});
这篇关于角度2:使用服务广播事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!