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.