Нужно добавить независимую страницу 404 в Angular без верхнего или нижнего колонтитула - PullRequest
Новая
       82

Нужно добавить независимую страницу 404 в Angular без верхнего или нижнего колонтитула

0 голосов
/ 21 февраля 2020

Я создал приложение Angular и для этого, если пользователь указывает на неизвестный URL-адрес, он должен перейти на страницу 404, показывающую дружественное сообщение для перенаправления на главную страницу. Теперь я создал компонент, показывающий это 404. Теперь проблема в том, что он показывает заголовок и нижний колонтитул. В этом случае я не хочу отображать верхний и нижний колонтитулы Страница прямо сейчас Мне нужно отобразить 404 без верхнего и нижнего колонтитула. Есть ли простой способ добиться этого? Заранее спасибо.

Индекс. html

<body>
  <app-root></app-root>
</body>

app.component. html

<div *ngIf="!webLoading">
    <app-header></app-header>
    <div class="minhgt-router-outlet">
        <router-outlet></router-outlet>
    </div>
    <app-footer></app-footer>
</div>
<div class='modal d-flex carousel' *ngIf="webLoading">
    <p-progressSpinner [style]="{width: '50px', height: '50px'}" 
    strokeWidth="4" fill="#ffffff" animationDuration=".8s"></p-progressSpinner>
</div>

not-found.component. html

<div class="notfound">
        <div class="notfound-404">
            <h3>Oops! Page not found</h3>
            <h1>
                <span>4</span>
                <span>0</span>
                <span>4</span>
            </h1>
        </div>
        <h2>we are sorry, but the page you requested was not found</h2>
</div>

app-routing.module.ts 

const routes: Routes = [
  {
    path: "",
    component: BodyContentComponent
  },
{ 
    path: "**", 
    component: NotFoundComponent
   }
];

Ответы [ 2 ]

2 голосов
/ 21 февраля 2020

В вашем AppComponent вы можете подписаться на события маршрутизатора и проверить текущий URL-адрес, а также добавить условие на основе этого в файл шаблона. 

url: string;

ngOnInit(): void {
  this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd),
    map((e: NavigationEnd) => this.url = e.urlAfterRedirects)
  ).subscribe();
}

И затем в вашем шаблоне 

<ng-container *ngIf="url !== '/404url'"> <app-header></app-header></ng-container>

Кроме того, чтобы это работало, необходимо указать c маршрут для страницы 404 и перенаправить все маршруты с подстановочными знаками на эту страницу. 

{
  path: '**',
  redirectTo: '404PageRoute',
  pathMatch: 'full'
},  {
  path: '404PageRoute',
  component: NotFountcomponent
}
1 голос
/ 21 февраля 2020

В вашем css из not-found.component добавьте 

.hasDisplay {
  display: none;
}

hasDisplay класс должен быть в вашем Div верхнего и нижнего колонтитула

и добавить 

 @Component({
  selector: 'app-not-found',
  templateUrl: './not-found.component.html',
  styleUrls: ['./not-found.component.scss'],
  encapsulation: ViewEncapsulation.None
})

Надежда полезна

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...