Question

app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; 
 import { NgModule } from '@angular/core'; 
 import { FormsModule } from '@angular/forms'; 
 import { HttpModule } from '@angular/http'; 
 import { Routes, RouterModule } from '@angular/router'; 
 import { AppComponent } from './app.component'; 
 import { HomeComponent } from './home/home.component'; 
 import { UsersComponent } from './users/users.component'; 
 import { ServersComponent } from './servers/servers.component'; 
 import { UserComponent } from './users/user/user.component'; 
 import { EditServerComponent } from './servers/edit-server/edit-server.component'; 
 import { ServerComponent } from './servers/server/server.component'; 
 import { ServersService } from './servers/servers.service'; 

     const appRoutes: Routes = [ 
        { path: '', component: HomeComponent }, 
        { path: 'users', component: UsersComponent }, 
        { path: 'server', component: ServerComponent } 
        ]; 


 @NgModule({ 
declarations: [ AppComponent, HomeComponent, UsersComponent, ServersComponent, UserComponent, EditServerComponent, ServerComponent ], 
imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ],

app.component.html

<ul class="nav nav-tabs"> 
<li role="presentation" class="active"><a routerLink="/">Home</a></li> 
<li role="presentation"><a routerLink="/server">Servers</a></li> 
<li role="presentation"><a [routerLink]="['/users']">Users</a></li> </ul> </div>
 </div> 
<div class="row"> 
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> 
<app-home></app-home> 
</div> </div> 
<div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> 
<app-users></app-users> </div> </div>
 <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <app-servers></app-servers> </div> </div>

servers.component.html

<div class="col-xs-12 col-sm-4"> <app-edit-server></app-edit-server> <hr> <app-server></app-server> </div>

如果我尝试以下操作，而不是将用户，服务器和家庭组件嵌套在 app.component.ts 中，则无法在DOM中看到服务器组件。我希望显示服务器组件。

app.component.html

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a routerLink="/">Home</a></li> <li role="presentation"><a routerLink="/server">Servers</a></li> <li role="presentation"><a [routerLink]="['/users']">Users</a></li> </ul> </div> </div> 
<div class="row"> 
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <router-outlet></router-outlet> 
</div> </div> </div>

Answer 1

因为您的路线设置是

>  const appRoutes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'users', component: UsersComponent }, 
    { path: 'server', component: ServerComponent } 
    ];

您的默认路由是HomeComponent，要显示其他组件，您应该导航到

> /users

查看用户并导航到

> /server

查看您的服务器组件

Answer 2

这是因为您需要将这些作为Appcomponent的子级！

    const appRoutes: Routes = [ 
        { path: '', component: HomeComponent, 
         children: [
            { path: 'users', component: UsersComponent }, 
            { path: 'server', component: ServerComponent } ] }, 

        ];

Answer 3

您的代码应具有如下的pathMatch设置

 const appRoutes: Routes = [ 
    { path: '', component: HomeComponent, pathMatch: "full" }, 
    { path: 'users', component: UsersComponent }, 
    { path: 'server', component: ServerComponent } 
    ];

如果您还有任何问题，请告诉我

如果我包含router-outlet指令，则无法在DOM中看到一个组件。没有错误讯息

3 个答案: