从组件到app.component的角度EventEmitter [英] Angular EventEmitter from component to app.component
问题描述
我想将事件发射器从子级绑定到父级组件,但是父级组件是'app.component',因此我假设两者之间的关系未声明而是隐式的.
在此答案中,我看到了如何向其父中已明确声明为此类的孩子添加事件发射器:
I would like to bind an event emitter from a child to a parent component, but the parent component is the 'app.component'so i assume that the relationship between the two is not declared but implicit.
in this answer , i see how to add an event emitter to a child that has been explicitly declared as such, in his parent:
<child (notifyParent)="getNotification($event)"></child>
但是在我的应用中,子组件(让其称为id:child)不是用这种方式声明的,而是在app.module
中声明为路由的:
But in my app, the child component (lets call id: child), is not declared in that way, but its declared in the app.module
as route:
const appRoutes: Routes = [
{ path: '**', component: Child}
];
此组件基本上代表网站的初始页面,并且在没有提供完整身份验证的情况下,还用作防护中的重定向.
我想做的是将事件发射器添加到child
,以通知app.module
更改.
我已经用@Output()
装饰器在child
和EventEmitter
中实现了,并且我还实现了将在app.module
中调用的方法,但是我只是找不到在两个中注册该绑定的地方组件.
由于所有组件都是app.component
的子级,因此app.component
不应提供一种方法来注册其子级的传入输入,而无需先将它们明确声明为子级吗?
This component basically represents a splash page to the site, and is also used as a redirect in a guard in case full authentication is not provided.
What i would like to do, is to add an event emitter to child
that notifies app.module
of a change.
I have already implemented, in child
an EventEmitter
with the @Output()
decorator, and i have also implemented the method that will be invoked in app.module
but i just cant find a place where to register this binding within the two components.
Since all components are children of app.component
should not app.component
provide a way to register for incoming input from its children, without the need of declaring them explicitly as children first?
推荐答案
好吧,据我所知,您必须显式绑定app.component
和child.component
才能真正使事件发射器正常工作.
Well, from my understanding you'll have to explicitly bind the app.component
and child.component
to actually make the Event emitter work.
根据您的情况,您还可以考虑使用Subject
来实现相同的目的.您不必为每个child.component
显式定义,而是只需订阅并收听正在发生的任何更改.
From your scenario, you can also consider using Subject
to achieve the same. You dont have to explicitly define for every child.component
, rather you can simply Subscribe and listen to any changes that are happening.
我创建了一个链接来帮助您两个兄弟姐妹父组件对话.您可以对几个孩子和一个父母做同样的事情
I have created one link to help two sibling & parent components talk. You can do the same for Several child and one parent
app.component.html
<br />
Enter a name:
<input type="text" [(ngModel)]="myTextVal">
<button (click)="sendTextValue()">Click Me to emit to Hello Component</button>
<hello></hello>
app.component.ts
export class AppComponent {
myTextVal: string;
constructor(private appService: AppService){}
sendTextValue(){
this.appService.passValue(this.myTextVal);
}
}
app.service.ts
@Injectable()
export class AppService {
public stringSubject = new Subject<string>();
passValue(data) {
//passing the data as the next observable
this.stringSubject.next(data);
}
}
hello.component.ts
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
name: string;
constructor(private appService: AppService) {
}
ngOnInit() {
this.appService.stringSubject.subscribe(
data =>
{
console.log('next subscribed value: ' + data);
this.name = data;
}
);
}
}
这篇关于从组件到app.component的角度EventEmitter的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!