Angular 4 在某些页面上隐藏下拉菜单

Question

我想在某个页面上隐藏一个下拉菜单（它包含的元素）。我会用“*ngIf”请求来完成它，但是我不确定条件。路由器路径是 '/project' 但我无法访问它 - 因此 *ngIf="path==='/project'" 将不起作用。关于应该使用什么条件的任何想法？或者更好的解决问题的方法。

还有像 /project/id 这样的子路径，下拉菜单应该在这些子路径上可用。

Answer 1

在您的控制器中，添加一个可见的布尔值（ true 或 false ）在你 html 中简单地添加： *ngIf="visible" 到你的 div

Answer 2

在您的 component/controller 中，尝试类似的内容：

showDropdown: boolean = false;

ngOnInit() {
      this.showDropdown = path === '/project'
}

路径可能是您组件的输入变量？

@Input
path: string;

在您的 HTML-模板中，您可以执行以下操作：

<div *ngIf="showDropdown">test</div>

Answer 3

根据我了解你的情况，你需要做以下事情：

1. 在导航栏组件中，你必须订阅路由来获取当前路径，这将帮助你实现是否显示你的下拉列表，请执行以下操作
import { Router, NavigationEnd } from '@angular/router'; public showDropDown: boolean; constructor(private router: Router) {} ... ngOnInit() { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { this.showDropdown = event.url.indexOf('/project') >= 0; } } }
1. 在您的 html 中，您的下拉菜单所在
<div class="my-dropdown" *ngIf="showDropdown"> ... (your dropdown) </div>

这将帮助您避免对其他组件的依赖，并能够根据路由操作数据。当然，总会有办法改善这一点。一切都取决于你想要什么结果。

Angular 4 Hide Dropdown on certain pages