Вызов URL-адреса события маршрутизации для выравнивания всех несуществующих страниц - PullRequest
Новая
       6

Вызов URL-адреса события маршрутизации для выравнивания всех несуществующих страниц

0 голосов
/ 05 июля 2019

Поэтому я пытаюсь отключить appheader и appfooter в своем приложении Angular. Это для страницы с ошибкой 404, которую я создаю для приложения.

У меня есть найденная страница, перенаправленная как 

    const routes: Routes = [
      {path: '**', component: NotfoundComponent },
    ];

Вот мой код: 

import { Component } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  
})
export class AppComponent {
    showHead = false;
    showFooter = false;

    constructor(private router: Router) {
    // on route change to '/login', set the variable showHead to false
        router.events.forEach((event) => {
        if (event instanceof NavigationStart) {
            // tslint:disable-next-line:no-string-literal
            if (event['url'] === '**') {
            this.showHead = false;
            this.showFooter = false;
            } else {
            // console.log("NU")
            this.showHead = true;
            this.showFooter = true;
            }
        }
        });
    }
}

Вот мой пример с компонентом приложения: 

<app-header *ngIf="showHead"></app-header>
<div class="routeContainer" [@routeAnimation]="getDepth(myOutlet)">
    <main class="main">
        <router-outlet #myOutlet="outlet"></router-outlet>
    </main>
</div>
<app-footer *ngIf="showFooter"></app-footer>

Я пытаюсь убедиться, что он не показывает верхний и нижний колонтитулы на моей странице ошибки 404 в моем приложении.

Ответы [ 2 ]

1 голос
/ 05 июля 2019

Вы можете попробовать это

app.component.ts 

isNotFound = false;
constructor(
    private route: ActivatedRoute,
    private router: Router)
{ }

ngOnInit(): void {
     this.router.events.pipe(
        filter(e => e instanceof NavigationEnd)
    ).subscribe(event => {
        if (this.route.snapshot.firstChild.data.status) {
            this.isNotFound = true;
        }
    });
}

Это позволит получить данные, не найденные из ActivatedRoute, которые мы можем использовать, а затем настроить заголовокнижний колонтитул

маршрутизатор будет 

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: '**', component: NotfoundComponentComponent , data: { status : 'notfound'}}
];

здесь обратите внимание на data: { status : 'notfound'}, который мы будем использовать в нашем компоненте приложения.

приложение.component.html 

<app-header *ngIf="!isNotFound"></app-header>
<router-outlet></router-outlet>   
<app-footer *ngIf="!isNotFound"></app-footer>
1 голос
/ 05 июля 2019

Вам нужно будет экспортировать массив маршрутов следующим образом:

const routes: Routes = [...

Затем вы можете импортировать этот массив в файл app.component.ts.Таким образом, вы можете перебирать его и проверять переменную пути в каждом индексе.

В качестве альтернативы, вы можете использовать совершенно другой шаблон для NotFoundComponent, который не включает ваш верхний и нижний колонтитулы.

...