Angular 角度4+；routerlink在不同的路由器出口中加载组件

我刚刚开始学习Angular中的路由，我正在尝试制作一个简单的应用程序，它显示一个主页，其中包含指向仪表板和联系人页面的链接

应用程序组件.ts

从'@angular/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
模板：`
`,
})
导出类AppComponent{
构造函数（）{}
}

应用程序模块.ts

从'@angular/core'导入{NgModule}
从“@angular/platform browser”导入{BrowserModule}
从“@angular/router”导入{RouterModule}
从“./app.component”导入{AppComponent}
从“/Home.component”导入{Home}
从“./Dashboard.component”导入{Dashboard}
从“./Contact.component”导入{Contact}
@NGD模块({
导入：[浏览器模块，
RouterModule.forRoot([
{路径：'home'，组件：home}，
{路径：'dashboard'，组件：dashboard}，
{路径：'contact'，组件：contact}，
{路径：''，重定向到：'/home'，路径匹配：'full'}
])],
声明：[AppComponent、主页、仪表板、联系人]，
引导：[AppComponent]
})
导出类AppModule{}

home.component.ts

从'@angular/core'导入{Component}
@组成部分({
模板：`
家
我想你真正想做的事情如下

对于app.component：

import {Component} from '@angular/core'

@Component({
    selector: 'my-app',
    template: `
        <nav>
            <a routerLink="/home">Home</a>
            <a routerLink="/dashboard">Dashboard</a>
            <a routerLink="/contact">Contact</a>
        </nav>
        <router-outlet></router-outlet>
    `,
})
export class AppComponent {

}

import {Component} from '@angular/core'

@Component({
    template: `
        <h2>Home</h2>
    `,
})
export class Home {
    constructor() { }
}

从'@angular/core'导入{Component}
@组成部分({
选择器：“我的应用程序”，
模板：`
家
仪表板
接触
`,
})
导出类AppComponent{
}

对于home.com组件：

import {Component} from '@angular/core'

@Component({
    selector: 'my-app',
    template: `
        <nav>
            <a routerLink="/home">Home</a>
            <a routerLink="/dashboard">Dashboard</a>
            <a routerLink="/contact">Contact</a>
        </nav>
        <router-outlet></router-outlet>
    `,
})
export class AppComponent {

}

import {Component} from '@angular/core'

@Component({
    template: `
        <h2>Home</h2>
    `,
})
export class Home {
    constructor() { }
}

从'@angular/core'导入{Component}
@组成部分({
模板：`
家
`,
})
出口级家庭{
构造函数（）{}
}

其他一切都是一样的。我所做的只是将nav移动到app.component中，在nav中添加一个home链接，并从home.component中删除第二个路由器插座。试试看