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() { }
    }

仪表板和联系人页面应显示在导航栏下方，其中定义了主页组件的路由器插座。但相反，我认为它们正在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中，在导航器中添加了一个home链接，并从home.component中删除了第二个路由器插座。试试看。

angular 4+ routerlink在不同的路由器插座中加载组件

1 个答案: