Я не могу видеть один компонент в DOM, если я включаю директиву розетки маршрутизатора. Там нет сообщения об ошибке

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

Это потому, что вам нужно, чтобы они были детьми Appcomponent!

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

        ]; 

Answer 2

Ваш код должен иметь настройку pathMatch, как это

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

Пожалуйста, дайте мне знать, если у вас все еще есть проблемы

Answer 3

так как ваши настройки маршрутов таковы:

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

ваш маршрут по умолчанию - HomeComponent, и для отображения других компонентов вам нужно перейти к

> /users

для просмотра пользователей и перехода к

> /server

для просмотра вашего серверного компонента