Angular 2 output from router-outlet

<router-outlet></router-outlet> is just a placeholder for adding routed components. There is no support for any kind of binding.

You can create a custom <router-outlet> that allows you to do that or more common, use a shared service to communicate between parent component and routed component.

For more details see https://angular.io/docs/ts/latest/cookbook/component-communication.html

update

There is now an event that allows to get the added component

<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>

which allows to communicate (call getters, setters, and methods) with the component in componentAdded()

A shared service is the preferred way though.

<router-outlet></router-outlet> can't be used to emit an event from the child component. One way to communicate between two components is to use a common service.

Create a service

shared-service.ts

import { Observable } from "rxjs/Observable";
import { Injectable } from "@angular/core";
import { Subject } from "rxjs/Subject";

@Injectable()
export class SharedService {
    // Observable string sources
    private emitChangeSource = new Subject<any>();
    // Observable string streams
    changeEmitted$ = this.emitChangeSource.asObservable();
    // Service message commands
    emitChange(change: any) {
        this.emitChangeSource.next(change);
    }
}

Now inject the instance of the above service in the constructor of both the parent and child component.

The child component will be emitting a change every time the onClick() method is called

child.component.ts

import { Component } from "@angular/core";

@Component({
    templateUrl: "child.html",
    styleUrls: ["child.scss"]
})
export class ChildComponent {
    constructor(private _sharedService: SharedService) {}

    onClick() {
        this._sharedService.emitChange("Data from child");
    }
}

The parent component shall receive that change. To do so,capture the subscription inside the parent's constructor.

parent.component.ts

import { Component } from "@angular/core";

@Component({
    templateUrl: "parent.html",
    styleUrls: ["parent.scss"]
})
export class ParentComponent {
    constructor(private _sharedService: SharedService) {
        _sharedService.changeEmitted$.subscribe(text => {
            console.log(text);
        });
    }
}

Hope this helps :)