如何在Angular2中使用多个出口渲染部分视图答案

【问题标题】：How to render partial view with multiple outlet in Angular2如何在Angular2中使用多个出口渲染部分视图
【发布时间】：2017-08-22 18:10:12
【问题描述】：

我是 Angular2 的初学者，想用路由概念创建简单的 CRUD 操作。我正在使用 Visual Studio 2015，所以所有配置都已经可供我使用。我想在现有视图中打开一个视图，如下图所示，

获取，帖子视图应在下方区域（部分内容区域）呈现，

我的模块，

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { FetchDataGetComponent } from './components/fetchdata/fetchdata.get.component'
import { FetchDataPostComponent } from './components/fetchdata/fetchdata.post.component'

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        FetchDataGetComponent,
        FetchDataPostComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'data', component: FetchDataComponent },
            { path: 'data/get', component: FetchDataGetComponent, outlet: 'datachild' },
            { path: 'data/post', component: FetchDataPostComponent, outlet:'datachild' },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

App.component.html,

<div class='container-fluid'>
    <div class='row'>
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <router-outlet></router-outlet>
            <router-outlet name='datachild'></router-outlet>
        </div>
    </div>
</div>

fetchdata.component.html

<div class='navbar-collapse collapse'>
    <ul class='nav navbar-nav'>
        <li [routerLinkActive]="['link-active']">
            <a [routerLink]="['/data/get']">
                <span class='glyphicon glyphicon-home'></span> GET
            </a>
        </li>
        <li [routerLinkActive]="['link-active']">
            <a [routerLink]="['/data/post']">
                <span class='glyphicon glyphicon-education'></span> POST
            </a>
        </li>
        <li [routerLinkActive]="['link-active']">
            <a [routerLink]="['/databyid']">
                <span class='glyphicon glyphicon-th-list'></span> Fetch data by id
            </a>
        </li>
    </ul>
</div>
<div>
    <h1>Partial content area</h1>
</div>

我正在使用插座功能做我的事情，但没有运气，其他链接（主页，计数器...）正在工作，但 GET，POST 不工作，我需要在哪里进行更改才能使其工作？

【问题讨论】：

标签： angular angular2-routing angular2-template angular2-directives

【解决方案1】：

请参见 routerlink 具有“/data/get”，而在路由文件中具有“data/get”。从'/data/get'中删除第一个斜杠

【讨论】：