Question

我希望有条件地显示各种导航选项卡-取决于我始终存储在项目中全局变量中的当前路线。

在这里，我试图从我的'authService'访问全局'current_route'变量并将其与字符串进行比较，这将确定我显示哪些导航标签。

<ul class="nav nav-tabs">
  <div *ngIf='"authService.current_route"  === "site/map"'>
    <li (click)="changeroute()">
      <a [routerLink]="['']">Current Site</a>
    </li>
    <li (click)="changeroute()">
      <a [routerLink]="['/sites/map']">Site Map</a>
    </li>
  </div>
</ul>

正确的语法是什么？我需要大括号{{}}吗？我似乎什么也无法工作。谢谢。

我的组件看起来像

  ...
  constructor(private router: Router, public authService: AuthService, ) {}

  ngOnInit() {
    this.authService.current_route = this.router.url
    console.log(this.authService.current_route)
    console.log(typeof(this.authService.current_route))

  }
  changeroute() {
    this.authService.current_route = this.router.url
    console.log(this.authService.current_route)

  }

}

谢谢！

Answer 1

当您要获取特定变量的值时，通常使用interpolation syntax {{}}。对于property binding syntax []，您可以仅指定要绑定到的属性的名称。或者，您也可以指定一个将产生值的表达式。如果要使用属性绑定语法为属性分配字符串值，但又不想在Component Class上定义属性，则也可以这样做：

<html-element-name-or-component-selector  
  [propertyName]="'propertyValue'">
</html-element-name-or-component-selector>

*ngIf应该像属性绑定语法一样使用。因此，可以为其分配属性名称或表达式。在您的情况下，它是一个返回布尔值的表达式。因此，将您的* ngIf块更改为：

<div *ngIf="authService.current_route === 'site/map'" >

会工作的。

您还为routerLink使用了属性绑定语法，这并不是真正需要的。

因此您可以将其更改为此：

<ul class="nav nav-tabs">
    <div *ngIf='"authService.current_route"  === "site/map"' >
        <li (click)="changeroute()"><a routerLink="/" >Current Site</a></li>
        <li (click)="changeroute()"><a routerLink="/sites/map">Site Map</a></li>
    </div>
</ul>

此外，正如Antonis所建议的那样，您不应该在模板上使用这种逻辑。它们应该在组件类上定义。这样，它就可以松散耦合，可以更好地分离关注点，也更适合单元测试。

因此，按照他的建议，创建了一个吸气剂：

get onSiteMap(): boolean {
  return this.authService.current_route === 'site/map';
}

然后相应地更新您的条件：

<ul class="nav nav-tabs">
  <div *ngIf="onSiteMap">
    <li (click)="changeroute()">
      <a routerLink="/">Current Site</a>
    </li>
    <li (click)="changeroute()">
      <a routerLink="/sites/map">Site Map</a>
    </li>
  </div>
</ul>

注意：请确保console.log(this.authService.current_route)返回“站点/地图”。或者，如果它返回了其他任何内容，请相应地更新模板中的*ngIf条件。

Answer 2

由于您的案例非常具体，因此建议您使用吸气剂，以使模板更整洁，并且可以更轻松地更改组件内部的逻辑。

组件：

get isOnSiteMap(): boolean {
  return this.authService.current_route === 'site/map'
}

模板：

<div *ngIf="isOnSiteMap">

Angular 5- * ngIf与可变语法比较

2 个答案: