如何在 Angular 4 中创建从应用程序组件页面到其他页面的导航链接？答案

【问题标题】：How to Create Navigation link from app component page to other pages in angular 4?如何在 Angular 4 中创建从应用程序组件页面到其他页面的导航链接？
【发布时间】：2018-05-04 04:45:03
【问题描述】：

您好，我对 Angular 完全陌生，我也尝试了其他堆栈溢出答案。目前我正在从事 angular 4 项目。根据我的项目，我现在只需要使用角度及其路由来创建设计。我真正想要的是一个登录页面，一旦键入登录按钮需要转到另一个页面，其中水平左侧导航栏及其第一个子项处于活动状态，并且通过单击导航栏菜单，只需更改内容并且导航栏保持静态对于所有其他页面（仅登录除外）。最后浏览了很多视频后，我创建了一个登录页面。我在 appcomponent.html 中编写了登录页面的代码，并将 routerlink 提供给按钮登录以打开登录页面。我的路由正常工作，一旦我点击登录，我的网址就会从 http://localhost:4200/ 更改为 http://localhost:4200/sidebar，但我的页面仍然只显示登录页面设计。

代码如下： index.html

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

app.component.ts

import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SidebarComponent } from './sidebar/sidebar.component';

const appRoutes: Routes = [
  { path:'sidebar', component: SidebarComponent  }
];

@NgModule({
  declarations: [
    AppComponent,
    SidebarComponent,
   ],
  imports: [   
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

我只给了我给路由器链接的登录按钮代码，因为有很多代码

<div class="col-md-12 col-md-push-6 text-center">
<a routerLink="/sidebar" routerLinkActive="active"> <button id="Enter" class="btn btn-primary btn-block btn-flat fa fa-sign-in" > Log-In</button></a>
 </div>

然后我在我想要呈现内容的导航栏页面中提供<router-outlet></router-outlet>。由于目前我的一个不工作，我将 sidebar.htlm 页面编码更改为仅<h1> TESTING </h1>。我做错了什么？请帮忙。

【问题讨论】：

你能显示app.component.html的代码吗？
它只是一个登录页面的设计。只有我在登录按钮中给出的 routerlink 与其他项目不同。我上面也给出了那个路由器链接代码（因为设计代码很大，我只给出了按钮代码）。

标签： angular routing angular4-router

【解决方案1】：

您是否在 app.component.html 上提供了任何路由器插座？您需要它来显示组件。这就是我的 app.component.html 的样子：

 <app-navbar></app-navbar> // This is be present on whole web page/app.
    <any-other -component-that-should-be-alway-present-on-whole-page>
    </any-other -component-that-should-be-alway-present-on-whole-page>

    <router-outlet></router-outlet>

    <app-footer></app-footer>

另外，如果您的视图代码很大，那么您应该创建子组件，而不是在单个组件中编写所有内容。对于 Z 索引，look at this

对于第一个逻辑：在您的登录组件中：

  navbar;
  ngOnInit() {
    this.navbar = document.getElementById('navbar'); // change this as per the way you want to get the navbar component.
    navbar.style.display = "none";
  }

但这还不够。如果您从此登录页面转到其他组件，则必须再次显示导航栏。因此，在您的登录组件上实现 OnDestroy 并编写以下代码。

  ngOnDestroy() {
    this.navbar.style.display = "block or w/e";
  }

【讨论】：

但是如果我这样做，导航标题也会显示在登录页面上吗？？\
是的，如果您希望导航栏不显示在登录页面上，那么有两种方法可以做到： 1. 使用 z-index 属性用登录组件覆盖导航栏。 2.在登录组件或服务中编写逻辑以更改导航栏的显示=无
对不起，我对这个角度完全陌生..dnt 也知道 Z 指数..你能解释或分享任何链接或参考吗？
我已经编辑了我的答案以解决您的其他问题
我在登录组件中使用了你的代码。我使用侧边栏而不是导航栏.. 但是行sidebar.style.display="none"-此行侧边栏显示错误消息为'找不到名称“侧边栏”'