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

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

angular-directive angular

ranjit redekar · 技术社区 · 6 年前

我正在从服务加载菜单,需要有条件地将片段添加到锚定。这里的问题是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 回复 | 直到 6 年前

JEY 6 年前

<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

推荐文章

Kael · 在html表格中显示关系api数据-角度

2 年前

Ajith · 如何在angularjs4中触发另一个组件的点击事件函数

7 年前

krv · 使用父对象上的指令获取嵌套元素

7 年前

MHOOS · 使用md列表项设置角度材质接触表单的样式

7 年前

Petya Naumova · 如何从内部使用部分指令的组件访问DirectivesModule?

7 年前

zb22 · 带表格的角度指令

7 年前

AndreaNobili · 这个Angular 2自定义指令是如何工作的?

7 年前

Milan Kamilya · 无法从组件调用模型类的方法。angular2中的html

7 年前

Rhushikesh · 如何在angularjs中测试指令是否加载

8 年前

Kangze Huang · ES6玩得很好。如何使用它。没有controllerAs的角度指令内的someFunction()?

8 年前