navigationend - router events subscribe angular 4

función de llamada angular2 del componente padre

Question

Tengo una aplicación donde tengo un componente de carga donde puedo cargar un archivo. Está incrustado en el body.component .

Al cargar, debe usar una función (por ejemplo, BodyComponent.thefunction() ) del componente padre (hacer una llamada para actualizar los datos): pero solo si el padre 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?

Answer 1

Solución sin eventos involucrados.

Supongamos que tengo un ChildComponent y desde allí quiero llamar al método myMethod() que pertenece a ParentComponent (manteniendo el contexto original del padre).

Clase de componente principal:

@Component({ ... })
export class ParentComponent {
get myMethodFunc() {
return this.myMethod.bind(this);
}
myMethod() {
...
}
}

Plantilla principal:

<app-child [myMethod]="myMethodFunc"></app-child>

Plantilla de niño

@Component({ ... })
export class ChildComponent {
@Input() myMethod: Function;
// here I can use this.myMethod() and it will call ParentComponent''s myMethod()
}

Answer 2

A continuación se trabajó para mí en la última

Angular5

class ChildComponent {
@Output() myEvent = new EventEmitter<string>();
callParent() {
this.myEvent.emit(''eventDesc'');
}
}

En la plantilla de ParentTemplate

<child-component (myEvent)="anyParentMehtod($event)"

Answer 3

Crearía un evento personalizado en el componente hijo. Algo como eso:

@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 padre en el hijo, pero estarán fuertemente unidos ...

Answer 4

Puede inyectar el componente primario al componente secundario.

Para más detalles ver
- ¿Cómo se inyecta un componente primario en un componente secundario?
- El componente secundario angular 2 se refiere al componente primario. De esta manera, puede asegurarse de que la función thefunction() solo se llama cuando parent es un body.component .

constructor(@Host() bodyComp: BodyComponent) {

De lo contrario, se @Output() usar @Output() para comunicarse de niño a padre.