将嵌套组件孙子之间的事件发送到根组件 [英] Emit events between nested components grandchild to root component
问题描述
我有 wheels.component
嵌套到 car.component
。
wheels.component:
export class WheelsComponent {
@Output() onLoaded : EventEmitter<string>() = new EventEmitter<string>();
private downloadAllFiles(url: string) {
this.onLoaded.emit('Hello, World 1!');
//some operations to wait
this.onLoaded.emit('Hello, World 2!');
};
}
组件 car.component
不是在html页面写的,而是通过 car-routing.module.ts的路由调用:
Component car.component
is not written at html page, but called through routing at car-routing.module.ts:
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'sfactmessage/:id',
component: CarComponent,
resolve: {
card: cardResolver
}
}
])
],
exports: [RouterModule]
})
export class CarRoutingModule {}
我想要的是处理从<$ c $发出的事件c> wheels.component ,而不是 car.component
,但是在app.component 。
What I want is to handle event emitted from wheels.component
, not at car.component
, but at app.component.
是否可以在 app.component
处理事件?
< a href =http://plnkr.co/edit/EsEJw7jbkRw4aNJ9iJR0?p=preview&open=app%2Fapp.component.ts =nofoll ow noreferrer> plunker示例无效(抱歉,这是我的第一个plunkr示例),但是给出了我的应用程序如何安排的视图。
The plunker sample is not working (sorry, this is my first plunkr example), but gives a view how my app is arranged.
推荐答案
Hello_ friend。
Hello_ friend.
所以基本上如果你想在你的应用程序中全局使用事件,你可以使用服务与 EventEmitter
So basically if you want to use events globally in your application you can use a Service in combination with EventEmitter
在这种情况下,您创建一个服务,例如 car.service.ts
In this case you create a service for example car.service.ts
import { Injectable, EventEmitter } from '@angular/core';
@Injectable()
export class CarService {
onLoaded : EventEmitter<string> = new EventEmitter<string>();
}
然后在子组件中使用此服务来发出这样的事件 wheels.component.ts
Then use this service in a child component to emit events like this wheels.component.ts
import { Component, EventEmitter } from '@angular/core';
import { CarService } from './car.service';
@Component({
selector: 'wheels',
template: '<a (click)="sendValues()"> Click me to send value </a>'
})
export class WheelsComponent {
constructor(private carService:CarService ){}
sendValues() {
/* Use service to emit events that can be used everywhere in the application */
this.carService.onLoaded.emit('Button in WheelsComponent was clicked ...');
};
}
然后从 AppComponent 捕获此事件,例如 app.component.ts
and then capture this event from AppComponent for example app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CarService } from './cars/car.service';
import { Subscription } from 'rxjs';
@Component({
selector: 'my-app',
templateUrl: `src/app.component.html`
})
export class AppComponent implements OnInit, OnDestroy{
private subscription: Subscription;
private loading = true;
name = 'Angular';
constructor(private carService: CarService){}
ngOnInit(){
this.subscription = this.carService.onLoaded.subscribe((message) => {
/*
Here you receive events from anywhere where
carService.onLoaded.emit() is used
**/
alert(`From AppComponent -> ${message}`);
});
}
ngOnDestroy(){
/* Don't forget to unsubscribe when component is destroyed */
this.subscription.unsubscribe();
}
}
IMPORTAN T ______________
如果您希望自己的服务全球,您需要在顶级提供商中声明它,例如 app.module.ts 是个好地方:
If you want your service to work globally you need to declare it in the top level providers for example app.module.ts is a good place:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { CarComponent} from './cars/car.component';
import { WheelsComponent} from './cars/wheels.component';
import { HomeComponent} from './home.component';
import { routing } from './app.routing';
import { CarService } from './cars/car.service';
@NgModule({
imports: [ BrowserModule, FormsModule, routing ],
declarations: [ AppComponent, CarComponent, WheelsComponent, HomeComponent ],
providers: [ CarService ], // <-------- SEE HERE
bootstrap: [ AppComponent ]
})
export class AppModule { }
这篇关于将嵌套组件孙子之间的事件发送到根组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!