Question

我正在尝试根据路线隐藏div。如果路由器的网址是登录名或忘记密码，则可以隐藏div。这是代码，它不起作用。

<div class="isNotLogin" *ngIf="router.url != '/login' || router.url != '/forgot-password'">
hide this content
</div>

但是它只适用于单个条件：

<div class="isNotLogin" *ngIf="router.url != '/login'">
hide this content
</div>

有什么想法吗？

Answer 1

如果您只想在登录或输入密码时隐藏Div。您需要使用===。

<div class="isNotLogin" *ngIf="!(router.url === '/login' || router.url === '/forgot-password')">
hide this content
</div>

Answer 2

根据Angular Style Guide，在@Suresh的答案的基础上，应将表示逻辑放在组件类中，而不是模板本身。这样可以提高可测试性，可维护性和可重用性。

移动逻辑以显示/隐藏Component Class中的div，然后从模板中的*ngIf调用它。

@Component({ ... })
export class YourComponent {

  ...

  shouldShow() {
    return !(router.url === '/login' || router.url === '/forgot-password');
  }

  ...

}

在您的模板中。

<div 
  class="isNotLogin" 
  *ngIf="shouldShow()">
  hide this content
</div>

ng如果多个条件不适用于router.url

2 个答案: