组件模板中的Angular 2 router-outlet

Question

I have been playing around with routes in Angular 2 but I have run into an issue that I cannot find an answer for. My routes are "working" but not the way I am hoping for. I am trying to use this like you would use ng-view from angular 1, my header and footer never change, and when my url changes new "stuff" is placed in my content.

Here is what I have now which "works"

import { Component } from '@angular/core';
import { HeaderComponent } from './shared/header/header.component';
import { ContentComponent } from './shared/content/content.component';
import { FooterComponent } from './shared/footer/footer.component';
import { TestComponent } from './components/test.component';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

@Routes([
    {path: '/test', component: TestComponent }
])
@Component({
    selector: 'app',
    template: `<header></header>
    <a [routerLink]="['/test']">Click for testComponent</a>
    <router-outlet></router-outlet>
    <footer></footer>`,
    directives: [HeaderComponent, ContentComponent, FooterComponent, ROUTER_DIRECTIVES]
})
export class AppComponent { }

What I am trying to do is put the router outlet inside of my ContentComponent so that essentially the router just dumps the new stuff directly into the main area of my app. When I try to rewrite:
<router-outlet></router-outlet>
as
<content><router-outlet></router-outlet></content>
the routing stops working, no error message, just stops. I also do not see my testComponent in the DOM when I inspect it with the devtools. So I thought, well I will put the router-outlet inside the template of my ContentComponent like so:

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

@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

However when I do this I get the error message: Cannot find default outlet.

I am missing something but the lack of documentation makes it very difficult to figure out, I would think there would be a way to define within @Routes where my outlet is but again, can't find any documentation that isn't for the deprecated-router. Hope someone can shed some light on this. Thanks in advance.

Note: general code critiques would also be helpful, I am very new to Angular 2 and would love the advice.

Answer 1

The way you call ContentComponent via <content> tag makes ContentComponent a child of your AppComponent and you can't place a router-outlet inside a child component's template. One way to achieve what you are after is to create a default route for the ContentComponent in the AppComponent:

@Routes([
    { path: '/', component: ContentComponent }
    { path: '/content', component: ContentComponent }
])

And AppComponent's template will be:

<header></header>     
<router-outlet></router-outlet>
<footer></footer>

Now you can define nested routes in your ContentComponent like this:

@Routes([
    { path: 'content1', component: Content1Component }
])
@Component({
    selector: 'content',
    template: `<router-outlet></router-outlet>`
})
export class ContentComponent { }

And if you have a menu in your header component and want to link to each nested content you can do this:

<a [routerLink]="['/content', 'content1']">Content1</a>

Which will load Content1Component into the ContentComponent's <router-outlet>