angular 4+ routerlink 在不同的 router-outlet 加载组件

Question

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

app.component.ts

    import {Component} from '@angular/core'

    @Component({
      selector: 'my-app',
      template: `
        <router-outlet></router-outlet>
      `,
    })
    export class AppComponent {
      constructor() { }
    }

app.module.ts

    import {NgModule} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    import {RouterModule} from '@angular/router'

    import { AppComponent } from './app.component'
    import {Home} from './home.component'
    import {Dashboard} from './dashboard.component'
    import {Contact} from './contact.component'

    @NgModule({
      imports: [ BrowserModule,
      RouterModule.forRoot([
        {path: 'home', component: Home},
        {path: 'dashboard', component: Dashboard},
        {path: 'contact', component: Contact},
        {path: '', redirectTo: '/home', pathMatch: 'full'}
        ])],
      declarations: [ AppComponent, Home, Dashboard, Contact ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule {}

home.component.ts

    import {Component} from '@angular/core'

    @Component({
      template: `
        <h2>Home</h2>
        <nav>
          <a routerLink="/dashboard">Dashboard</a>
          <a routerLink="/contact">Contact</a>
        </nav>
        <router-outlet></router-outlet>
      `,
    })
    export class Home {
      constructor() { }
    }

仪表板和联系人页面应显示在导航栏下方，其中定义了 Home 组件的路由器出口。但相反，我认为它们正在加载到 app.component.html 中定义的路由器插座中。为什么 Dashboard/Contact 组件的内容没有加载到导航栏下方？

我尝试搜索其他问题，但找不到与此问题相关的答案。

Plunkr- https://plnkr.co/edit/sjjJgHl5YHKsPVTGGDWs

Answer 1

我想你真正想做的是下面这样的事情。

对于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 {

}

对于home.component：

import {Component} from '@angular/core'

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

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

angular 4+ routerlink 在不同的 router-outlet 加载组件

angular 4+ routerlink loads component in different router-outlet

angular

angular-router

angular5