首页 文章

如何创建从应用程序组件页面到角度4的其他页面的导航链接？

提问于
浏览 次
1

嗨，我是Angular和 I tried other stack overflow answers also 的新手 . 目前我正在开展角度4项目 . 根据我的项目，我需要立即使用angular及其路由创建设计 . What I actually want is a login page, once key in login button need to go to another page with horizontal left side navbar along with its first child active and by clicking navbar menus, only content needs to change and the navbar remains static for all other pages(except login only). 最后经过大量视频后，我创建了一个登录页面 . 我在appcomponent.html中编写了Login页面的代码，然后我将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> . 我做错了什么？请帮助 .

angular routing angular4-router

1 回答

  • 0

    您是否在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-Index，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";
  }
    回复于

相关问题