Angular 4隐藏某些页面上的下拉列表

时间:2017-12-20 10:33:23

标签: javascript html angular typescript angular-ng-if

我想隐藏某个页面上的Dropdown(包括它的元素)。我会用'* ngIf' - 请求来做,但是我不确定这个条件。 路由器路径是' / project'但我无法访问它 - 因此* ngIf =" path ===' / project'"不会工作。 应该使用什么条件的想法?或者是解决问题的更好方法。

还有像/ project / id这样的子路径,下拉列表应该可用。

3 个答案:

答案 0 :(得分:0)

在你的控制器中,添加一个可见的布尔值(true或false) 并在你的HTML中简单地添加:* ngIf =“可见”到您的div

答案 1 :(得分:0)

在您的组件/控制器中,尝试类似:

showDropdown: boolean = false;

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

路径可能是组件的输入变量吗?

@Input
path: string;

在HTML模板中,您可以执行以下操作:

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

答案 2 :(得分:0)

据我了解您的情况,您需要执行以下操作:

    1. 在导航栏组件中,您必须订阅路由以获取当前路径,以帮助您了解是否显示您的下拉列表,请执行以下操作
    2. 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
      2. <div class="my-dropdown" *ngIf="showDropdown"> ... (your dropdown) </div>

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