Как создать навигационную ссылку со страницы компонента приложения на другие страницы в angular 4? - PullRequest
Новая
       22

Как создать навигационную ссылку со страницы компонента приложения на другие страницы в angular 4?

0 голосов
/ 04 мая 2018

Привет, я совершенно новичок в Angular и Я пробовал и другие ответы на переполнение стека . В настоящее время я работаю над проектом Angular 4. Что касается моего проекта, мне нужно создавать проекты только сейчас, используя angular и его маршрутизацию. То, что я на самом деле хочу, это страница входа в систему, после того, как введите кнопку входа в систему, нужно перейти на другую страницу с горизонтальной левой боковой панелью навигации и активным ее первым дочерним элементом, и нажав меню навигационной панели, нужно изменить только содержимое, а навигационная панель останется статической. для всех остальных страниц (кроме только для входа). Наконец, после просмотра большого количества видео, я создал страницу входа. Я написал коды для страницы входа в appcomponent.html и дал роутеру ссылку на кнопку входа, чтобы открыть страницу входа. моя маршрутизация работает, когда я нажимаю кнопку входа, мой URL меняется с 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>. Что я сделал не так? Пожалуйста, помогите.

1 Ответ

0 голосов
/ 04 мая 2018

Вы дали какой-нибудь роутер-розетку на 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 посмотрите на это

Для 1-й логики: в компоненте входа в систему: 

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