Tengo una aplicación donde tengo un componente de carga donde puedo cargar un archivo. Está incrustado en body.component .
Al cargar, debe usar una función (por ejemplo BodyComponent.thefunction() ) del componente principal (haga una llamada para actualizar los datos): pero solo si el principal es específicamente el body.component . La carga también se puede usar en otro lugar con un comportamiento diferente.
Algo así como parent(this).thefunction() , ¿cómo hacer eso?
Crearía un evento personalizado en el componente secundario. Algo como esto:
@Component({ selector: 'child-comp', (...) }) export class ChildComponent { @Output() uploaded = new EventEmitter<string>(); uploadComplete() { this.uploaded.emit('complete'); }Su componente principal podría registrarse en este evento
@Component({ template ` <child-comp (uploaded)="someMethod($event)"></child-comp> `, directives: [ ChildComponent ] }) export class ParentComponent { (...) someMethod(event) { } }Otra forma sería inyectar el componente principal en el secundario, pero estarán fuertemente vinculados entre sí...
A continuación se muestra el código que funcionó para mí en la última
class ChildComponent { @Output() myEvent = new EventEmitter<string>(); callParent() { this.myEvent.emit('eventDesc'); } } En la plantilla de ParentTemplate
<child-component (myEvent)="anyParentMethod($event)" Supongamos que tengo un ChildComponent y desde ahí quiero llamar al método myMethod() que pertenece a ParentComponent (manteniendo el contexto del padre original).
@Component({ ... }) export class ParentComponent { get myMethodFunc() { return this.myMethod.bind(this); } myMethod() { ... } } <app-child [myMethod]="myMethodFunc"></app-child> @Component({ ... }) export class ChildComponent { @Input() myMethod: Function; // here I can use this.myMethod() and it will call ParentComponent's myMethod() }