Question

嗨，我是Angular的新手，我也试过其他堆栈溢出答案。目前我正在开展角度4项目。根据我的项目，我需要立即使用angular及其路由创建设计。我真正想要的是一个登录页面，一旦登录按钮中的键需要转到带有水平左侧导航栏的另一个页面，并且其第一个子项处于活动状态，并且通过单击导航栏菜单，只需要更改内容并且导航栏保持静态所有其他页面（仅限登录）。经过大量的视频后，我创建了一个登录页面。我在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>。我做错了什么？请帮助。

Answer 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-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";
  }

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

1 个答案: