Angular-6 не может скрыть верхний и нижний колонтитулы приложения на странице входа и на странице регистрации - PullRequest
Новая
       6

Angular-6 не может скрыть верхний и нижний колонтитулы приложения на странице входа и на странице регистрации

0 голосов
/ 13 сентября 2018

Я новичок в Angular-6, я создал проект, затем у меня возникла небольшая проблема на Create Account странице & Sign in page, показывающей заголовок приложения и нижний колонтитул приложения.но я не хочу показывать эту страницу в заголовке приложения и в нижнем колонтитуле приложения. Я хочу знать, как это правильно отобразить на apirequest page.

Это часть моего кода

app-rout.ts 

export const Approutes: Routes = [
      {path: '', redirectTo: '/signup', pathMatch: 'full'},
      {path: 'home', component: HomeComponent},
      {path: 'signup', component: SignupComponent},
      {path: 'signin', component: SigninComponent},
      {path: 'forgotpassword', component: ForgotpasswordComponent},
      {path: 'apirequest', component: ApirequestComponent},
];

app.component.html 

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Спасибо

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Я бы предложил вам создать два разных компонента и взглянуть на Angular Guard для вашего проекта.Это поможет вам гарантировать, что после входа в ваше приложение ваш пользователь не сможет вернуться к "/login".

Это будет выглядеть как 

App/
|
|– login/
|– home/

.логика будет выглядеть примерно так: 

canActivate() {
 if (user) {
  return true;
 } else router.navigateByURL('login');
}

Таким образом, вы можете отделить жизненный цикл приложения и использовать нижний колонтитул и заголовок только там, где вы хотите, чтобы они были :)

0 голосов
/ 13 сентября 2018

В вашем app.component.ts вы можете подписаться на Router.events. 

import { Router, NavigationEnd } from '@angular/router';

constructor(
  private router: Router,
) { }

ngOnInit() {
  this.router.events
    .subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.headerFooter = (event.url !== '/login')
      }
    });
}

<app-header *ngIf="headerFooter"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="headerFooter"></app-footer>

Если event.url не равно /login, то вы показываете элементы, в противном случае вы их скрываете. Вы можете выполнить проверку по любому URL-пути, по которому хотите скрыть / показать верхний / нижний колонтитул, просто обновите условный оператор.

...