I have an app where I have an upload component where I can upload a file. It is embedded in the body.component.
On upload, it should use a function (e.g. BodyComponent.thefunction()) of the parent component (do a call to update the data): but only if it the parent is specifically the body.component. The upload might also be used elsewhere with different behavior.
Something like parent(this).thefunction(), how to do that?
I would create a custom event in the child component. Something like this:
@Component({
selector: 'child-comp',
(...)
})
export class ChildComponent {
@Output()
uploaded = new EventEmitter<string>();
uploadComplete() {
this.uploaded.emit('complete');
}
Your parent component could register on this event
@Component({
template `
<child-comp (uploaded)="someMethod($event)"></child-comp>
`,
directives: [ ChildComponent ]
})
export class ParentComponent {
(...)
someMethod(event) {
}
}
Another way would be to inject the parent component in the child one, but they will be strongly linked together...
angular2/core. Console log shows a problem with angular2-polyfills@Ouput instead of @Output. It could be the problem... I updated my answer.uploadComplete is not defined Note that I just copied these as examples. The parent has "someMethod" as well, but it already has an issue with uploadComplete. The parent component does use the (uploaded) binding on the child node, and it already had the child as a directive.
Below is the code that worked for me in the latest
class ChildComponent {
@Output() myEvent = new EventEmitter<string>();
callParent() {
this.myEvent.emit('eventDesc');
}
}
In ParentTemplate's template
<child-component (myEvent)="anyParentMethod($event)"
Suppose that I have a ChildComponent and from that I want to call the method myMethod() which belongs to ParentComponent (keeping the original parent's context).
@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()
}
this.myMethod.bind(this) is being returned. (Possibly I'm instead doing something fundamentally wrong.)
You can inject the parent component to the child component.
For more details see
- How do I inject a parent component into a child component?
- Angular 2 child component refers to parent component
This way you can ensure that thefunction() is only called when parent is a body.component.
constructor(@Host() bodyComp: BodyComponent) {
Otherwise using @Output() is preferred to communicate from child to parent.
constructor(@Host() bodyComp: BodyComponent).. perhaps it was changed recently. Works great, thx!In parent html:
<child [parent]="this"></child>
In child component:
@Input() parent: ParentComponent;
// then do whatever with `this.parent`
Events have their places, but I don't see anything else is simpler than this.
