[英]I am not able to see one component in DOM if i include router-outlet directive. There is no error message
app.module.ts 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 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 servers.component.html
<div class="col-xs-12 col-sm-4"> <app-edit-server></app-edit-server> <hr> <app-server></app-server> </div>
If I try below instead of nesting users, servers and home component in app.component.ts , I can't see server component in DOM. 如果我尝试下面而不是在app.component.ts中嵌套用户,服务器和家庭组件,我在DOM中看不到服务器组件。 I want Servers component to be displayed.
我想要显示Servers组件。
app.component.html 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>
as your routes setting is that 因为您的路线设置是
> const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'users', component: UsersComponent },
{ path: 'server', component: ServerComponent }
];
your default route is HomeComponent and to show the others component you should navigate to 您的默认路由是HomeComponent,并显示您应该导航到的其他组件
> /users
to view users and navigate to 查看用户并导航到
> /server
to view your server component 查看您的服务器组件
This is because you need to have these as children of Appcomponent! 这是因为您需要将这些作为Appcomponent的子项!
const appRoutes: Routes = [
{ path: '', component: HomeComponent,
children: [
{ path: 'users', component: UsersComponent },
{ path: 'server', component: ServerComponent } ] },
];
Your code should have pathMatch setting like this 您的代码应该具有这样的pathMatch设置
const appRoutes: Routes = [
{ path: '', component: HomeComponent, pathMatch: "full" },
{ path: 'users', component: UsersComponent },
{ path: 'server', component: ServerComponent }
];
Please let me know if you still have any problem 如果您还有任何问题,请告诉我
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.