我已经创建了一个 Angular 应用程序,为此,如果用户指向一个未知的 URL,它应该进入一个 404 页面,显示一条友好的消息以重定向到主页。 现在我创建了一个显示这个 404 的组件。现在的问题是,它显示了页眉和页脚。 在这种情况下,我不希望显示页眉和页脚现在我需要显示没有页眉和页脚的 404。 有什么简单的方法可以实现它。 提前致谢。

索引.html

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

应用程序组件.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>

未找到.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
   }
];

#1楼 票数:3

在你的 not-found.component css 中添加

.hasDisplay {
  display: none;
}

hasDisplay类必须在您的页眉和页脚的 div 中

并添加

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

希望有用

#2楼 票数:2 已采纳

在您的 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>

此外,要使其正常工作,您应该为 404 页面设置特定路由,并将所有通配符路由重定向到该页面。

{
  path: '**',
  redirectTo: '404PageRoute',
  pathMatch: 'full'
},  {
  path: '404PageRoute',
  component: NotFountcomponent
}

  ask by Arun Kumar translate from so

未解决问题?本站智能推荐:

1回复

如何在Angular中获取当前路由的模块

我正在开发一个简单的组件,它会根据当前路由的模块更改数据。 我不确定在哪里可以找到有关该模块的信息。 路由器const routes: Routes = [ { path: '', loadChildren: () => import('@/app/home
2回复

如何使用延迟加载仅加载angular8中的模块

我对延迟加载有疑问。 使用Augury检测我的路由器树结构。 app-routing.module.ts 示例模块路由预订-routing.module.ts app.module.ts 首先加载这些组件是否正常,或者我做错了什么?
2回复

使用queryParamsAngular输入后无法在后退按钮上离开页面

我在尝试将带有分页的页面留在列表中时遇到问题。 所以当进入页面时,我将其添加到 init 上面的代码工作正常,例如 produtos/:categoria/:productId?page=1; produtos/:categoria/:productId?page=2; produtos/:c
1回复

通过Angular路由传递json文件

我需要在我的angular应用程序中提供一个静态json文件,以供外部提供程序使用。 例如: http:// angular-app-url:4200 / app-test.json 当我进行路由时,它总是用于组件或其只是重定向到另一个路径。 我如何实现这一点来传递这个json文件?
1回复

在切换到下一个路由之前执行http请求

我想在从页面导航到任何其他路线时执行发布请求。 我试过使用: 这将执行 http 请求,但在从 http 请求收到响应并且请求被取消之前切换到下一个路由。
2回复

在canAcitvate中调用api-Angular

我正在尝试与Auth Guard进行交流。 我有一个httpcall,它根据来自HTTP调用的响应设置一个true / false值。 问题是:1)httpClients返回一个可观察的对象2)必须在调用Authorized方法之前发生httpClient订阅,这样就已经设置了hasSess
1回复

当我在Angular中导航到其路由的子子级时,如何保持mat-tab处于活动状态?

我正在使用mat-tab-nav-bar显示下面列出的 2 个选项卡: tabs.component.html : tabs.component.ts : app.routing.module.ts : 当我导航到 /products 时,该选项卡处于活动状态。 但是当我导航到 /produc
1回复

Angular8-无法匹配任何路线。URL段:'javascript:void(0)'

我有一个 angular 8 应用程序,其中我使用外部依赖项在我的应用程序中生成分页表。 我只需要将 json 数据传递给它,它就会为我完成剩下的工作。 因此分页表生成下一页和上一页的链接。 如果我将其悬停,它将显示localhost:4200/javascript : void(0) 。 据我所知