Question

在我的app.component.html中，我想基于当前URL渲染某些div容器。例如

1。如果当前URL经过验证，则呈现以下内容

<?php 
  if(isset($_POST['drpcategory']))
  {
    echo 'POST Received';
  }
?>

2。如果当前网址未经验证，请呈现以下内容

<div *ngIf="'authenticate' === this.currentUrl">
    <router-outlet></router-outlet>
</div>

我没有使用任何子路线。这是因为，我只希望对组件进行身份验证时使用不同的布局，其余的保持不变。

此功能在首次加载时有效，但是当我单击任何<div *ngIf="'authenticate' !== this.currentUrl" id="wrapper"> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <div class="row extranet-outlet-wrapper"> <router-outlet></router-outlet> </div> </div> </div> </div> </div> </div>时，视图不会更新。但是，如果我重新加载屏幕，它将起作用。问题在于[routerLink]中<router-outlet>的条件渲染，我通过删除条件进行了检查，效果很好。

有人可以帮助我了解这里发生的事情以及如何在不使用子路由的情况下解决此问题。

Answer 1

Angular提供了一个指令[routerLinkActive]，该指令将URL中包含路由的特定部分的类数组作为输入。

用法

app.component.html

<div class="main-container" [routerLinkActive]="['app-active-class']">
  <router-outlet></router-outlet>
</div>

pages.component.html

<div class="page-category">
  <a [routerLink]="1" [routerLinkActive]="['page-category-active-class']">Num_1</a>
  <a [routerLink]="2" [routerLinkActive]="['page-category-active-class']">Num_2</a>
</div>
<div class="page-view">
  <router-outlet></router-outlet>
</div>

page.component.html

<div class="page-num">
  {{ page_num }}
</div>

page.component.ts

import { ActivatedRoute } from "@angular/router";

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  page_num = this.route.snapshot.paramMap.get("page_num")
}

app-routing.module.ts

...
{ path: "page", component: PagesComponent },
{ path: "page/:page_num", component: PageComponent },
...

Angular-<router-outlet>周围的条件div容器

1。如果当前URL经过验证，则呈现以下内容

2。如果当前网址未经验证，请呈现以下内容

1 个答案: