Routing to parent's router-outlet from a child component

I've setup a plnkr to demonstrate what I am trying to ask

I have some components in a web app,

the parent component, App

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div class="main-container">
      <h2>This is the base. This div must be seen on app pages</h2>
      <a [routerLink]="['Home']"> Home </a> | 
      <a [routerLink]="['Users']"> Users  </a> | 
      <a [routerLink]="['Contact']"> Contact </a>
    </div>

    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {
    path: '/',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true

  },
  {
    path: '/users/...',
    name: 'Users',
    component: UsersComponent
  },
  {
    path: '/contact',
    name: 'Contact',
    component: ContactComponent
  }
])
export class App {

}

UsersComponent is loaded to the router-outlet of the parent controller at the route /users which is shown below,

@Component({
  selector: 'my-app',
  template : `

    <div  *ngFor="#page of pages">
      <a [routerLink]="[page.name]">
        {{page.slug}}
      </a>
    </div>

    <router-outlet></router-outlet>
  `
})
@RouteConfig([
  {path : '/', name: 'Main', component: MainRoute, useAsDefault: true}  
])
export class UsersComponent{
  /**
  * some methods to configure the routes,
  */
}

UsersComponent has dynamically configured routes for users,

eg. /alex , /john etc,

since the routes are from the child component, the path looks like example.com/users/alex, example.com/users/john etc.. But I want the path to be example.com/alex and example.com/john

also I want to load the component associated with each user to the parent's router-outlet. In the example here, to the router-outlet of App so that I can get rid of the user list.

Thank You for any help.