Блог

Главная - Вопросы по программированию - Компонент добавления навигации по маршрутизатору вместо компонента relpace

Компонент добавления навигации по маршрутизатору вместо компонента relpace

#angular6

#angular6

Вопрос:

Я делаю проект на Angular6. После нажатия кнопки входа в систему он должен перейти к панели мониторинга. но он покажет содержимое панели мониторинга на той же странице. кто-нибудь, пожалуйста, может помочь мне решить эту проблему.

Пожалуйста, найдите ссылку ниже, чтобы просмотреть снимок экрана. https://imagizer.imageshack.com/img924/79/vtPsDp.png

Вот мой код.

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { CustomMaterialModule } from './material.module';
import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ContactUsComponent,
    AboutUsComponent,
    LoginComponent,
    UserComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CustomMaterialModule,
    FormsModule,
    BrowserAnimationsModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { DashboardComponent } from './dashboard/dashboard.component';


const routes: Routes = [
{
path:'home',
component:HomeComponent
},
{
    path:'aboutUs',
    component:AboutUsComponent
},
{
    path:'contactUs',
    component:ContactUsComponent

},
{
    path:'dashboard',
    component:DashboardComponent
}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

 <html>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">

 <div class="container">
    <a class="navbar-brand" href="#">
          <img class="logo" src="assets/school-logo3.png" alt="">
        </a>
</div>

<div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">AUSTIN ASSISTANT SCHOOL</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div> 


    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
            <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" routerLink="aboutUs">aboutUs</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" routerLink="contactUs">contactUs</a>
            </li>
        </ul>

  </div>
</nav>

<div>
  <img class="logo1" src="assets/school_kidz.jpg" alt="">
  </div>
  <div class="right">
  <app-login></app-login>
</div>


  <footer class="page-footer navbar-fixed-bottom">
    <div class="fixed_footer">@Copyright 2019</div>
</footer>
</html>
<router-outlet></router-outlet>

login.component.html

  <div class="row">
  <div class="col-md-6">
    <h1>Login </h1>
    <form>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" name="email" [(ngModel)]="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" name="passowrd" [(ngModel)]="password">
      </div>
      <button class="btn btn-primary" (click)="login()">Login</button>
    </form>
  </div>
</div>
<router-outlet></router-outlet>

login.component.ts

 import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import { DashboardComponent } from 'src/app/dashboard/dashboard.component';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
email: string;
password: string;
constructor(private router : Router) { }
ngOnInit() {
}
login() {
if(this.email == 'n@gmail.com' amp;amp; this.password == '123') {
this.router.navigate(['dashboard']);
alert("right credentials");
}else {
alert("Invalid credentials.");
}
}
}

Ответ №1:

Да, определенно страница входа в систему определенно будет показана там, поскольку ваш маршрутизатор-розетка находится ниже этого.

Итак, вы можете решить эту проблему, просто сохранив router-outlet в своем приложении component.html

и добавьте маршрут на страницу входа в систему в файле маршрутизации приложения.

{

путь: «,

Перенаправление на: ‘/login’,

Соответствие пути: ‘полное’

}

Комментарии:

1. Да. Мне нужно показывать страницу входа только на домашней странице, поэтому я включил <app-login></app-login> в app.component.html . Я создал страницу входа в систему и написал функцию, которая после нажатия на кнопку входа в систему должна перейти на страницу панели мониторинга. Здесь проблема в том, что после нажатия на кнопку загружается содержимое страницы панели мониторинга (панель мониторинга работает), как я показал на скриншоте, но на той же странице. Я хочу, чтобы это содержимое было на отдельной странице.

2. Итак, вместо добавления селектора на домашней странице, под панелью навигации добавьте router-outlet и в модуле маршрутизации приложения добавьте маршрутизатор, как я упоминал выше, тогда ваша проблема будет решена