代码之家 › 专栏 › 技术社区 › ranjit redekar

如何将带有其值的条件片段添加到Angular5中的anchorHTML标记中

angular-directive angular

ranjit redekar · 技术社区 · 7 年前

我正在从服务加载菜单,需要有条件地将片段添加到锚定。这里的问题是fragment add用于空值,而不希望在url中添加用于空片段。

请参见以下导航栏组件的HTML代码。

<ul class="nav navbar-nav">
    <li *ngFor="let menu of menus">
       <a [routerLink]="menu.menuUrl" [title]="menu.name" here need to add fragment with it's value if menu.fragment present>
          <span>{{menu.name}}</span>
       </a>
    </li>
</ul>

1 回复 | 直到 7 年前

JEY 7 年前

<ul class="nav navbar-nav">
  <li *ngFor="let menu of menus" [ngSwitch]="menu.fragment !== undefined">
    <a *ngSwitchCase="true" [fragment]="menu.fragment" [routerLink]="menu.menuUrl" [title]="menu.name">
      <span>{{menu.name}}</span>
    </a>
    <a *ngSwitchDefault [routerLink]="menu.menuUrl" [title]="menu.name" >
      <span>{{menu.name}} no frag</span>
    </a>
  </li>
</ul>

您可以找到一个运行示例 https://stackblitz.com/edit/angular-fxp2dx

推荐文章

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

user3472810 · Angular@Output/EventEmitter返回undefined

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

Jihed Ben Zarb · 造型角材料日期选择器

5 月前

st_clair_clarke · 为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

5 月前

Ajay Kulkarni · Angular 19-重新路由到子路由未按预期工作

5 月前

Ajay Kulkarni · 路由器与导航上的路线不匹配

5 月前

Jace Johnson · Typescript文件读取的变量类型错误

5 月前

Ole · Angular资源API是否支持为资源添加初始值?

5 月前

Ole · 在使用新的Angular Resource API时取消搜索术语?

5 月前