我是角度4项目的新手 . 到目前为止，我发现为单独的导航栏和渲染页面给出了其他答案，但我的一个是所有内容页面都嵌入并在导航栏页面内呈现 . 所以我把 <router-outlet> 放在导航页面内，没有关闭导航栏 . 如果我在app-component中给出 <router-outlet> ，它会单独呈现页面，而不是在导航栏中 . 我的代码如下 .

的index.html

<body>
    <app-root></app-root>
</body>

app.component.html

<app-navbar></app-navbar> 
<app-loginpage></app-loginpage>

app.module.ts

const appRoutes: Routes = [
  {path:'', redirectTo:'/loginpage',pathMatch:'full'},
  { path:'loginpage', component: LoginpageComponent  },
  { path:'navbar', component: NavbarComponent  },
  { path:'product', component: ProductComponent  },];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent  ,
    LoginpageComponent,
    ProductComponent,],
imports: [   
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]

})
export class AppModule { }

login.component.html

<div class="login">
    <div class="form-group">
    <input class="form-control "  name="UserName" />
    </div>
    <div class="form-group">
    <input class="form-control "  name="password"/> 
    </div>
    <div class="col-md-12 col-md-push-6 text-center">
   <a routerLink="/product" routerLinkActive="active"><button id="Enter" class="btn btn-primary btn-block btn-flat fa fa-sign-in" > Log-In</button> </a>
    </div>
    </div>

navbar.component.html

<body class="hold-transition skin-blue sidebar-mini" id="navigationbar" >
<div class="wrapper "  >
    <header class="main-header">
(logo desings)  </header>
 <aside class="main-sidebar">
{nav side bar designs} </aside>
<div class="content-wrapper">
   <section class="content admin_table">
            <router-outlet></router-outlet>      
    </section>  </div>
  <footer class="main-footer">
{footer design}
</footer>
</body>

到 /product 页面的路由器链接是必须在导航栏页面中呈现的普通页面 . 目前，产品页面设计是

<p> Product Page Works </p>

由于我在堆栈溢出中搜索的所有答案都可用于不同的导航栏和不同的内容页面 . 但我的是导航栏页面中嵌入的内容页面 . 即使我尝试了this link的答案 . 当我的嵌入时，它会隐藏所有页面的导航栏 .

javascript angular navigationbar angular4-router