代码之家 › 专栏 › 技术社区 › Niharika

角度4+路由器链接加载不同路由器出口中的组件

angular-router angular5 angular

2

Niharika · 技术社区 · 8 年前

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

应用程序。组成部分ts

    import {Component} from '@angular/core'

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

应用程序。单元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 {}

家组成部分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() { }
    }

仪表板和联系人页面应显示在导航栏下方,此处定义了主组件的路由器出口。但相反,我认为他们正在加载应用程序中定义的路由器出口。组成部分html。为什么仪表板/联系人组件加载的内容不在导航栏下方?

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

普朗克尔 - https://plnkr.co/edit/sjjJgHl5YHKsPVTGGDWs

1 回复 | 直到 7 年前

1

R. Richards 7 年前

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

对于应用程序。组件:

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

其他一切都一样。我所做的就是将导航移到应用程序中。组件,在nav中添加了一个主链路,并从主路由器中删除了第二个路由器出口。组成部分试试看。