基于条件如何设置指令的布尔值 - Angular

Question

在 angular 中，我有一个接受布尔值输入的指令。

我在 html 中有一个锚标记，其中使用了该指令。现在我想根据以下设置指令的布尔值锚标记的 href 值。如果锚标记的 URL 以“http:”开头，那么我想通过 yes 为布尔值，否则为否。

如何在 angular html 组件中实现。下面是我的代码

**newWindow is the directive
isExternalLink is a input to the directive**


 <a href="{{ object.Url}}" 
newWindow Name="{{ object.Name }}" isExternalLink={{ here should apply
 the condition based on the object.URL.startswith and send yes/ no }} >{{object.Name}} </a>      

export class newWindow {
  @Input() Name: string;
  @Input() isExternalLink : string;

Answer 1

使用 RegExp 测试 url 是否以 http:

开头

添加一个getter来包裹条件

模板

<a href="{{ object.Url}}" 
   newWindow Name="{{ object.Name }}" [isExternalLink]={{ isExternal }} > 
  {{object.Name}} </a>

组件class：

export class MyComponent {
  get isExternal(): boolean {
    // If you want to test https too: use /^https?:/ instead
    return /^http:/.test(this.object.Url)
  }

  // ...
}

选择：

如果你不想处理正则表达式，使用字符串方法startsWith

get isExternal(): boolean {
  return this.object.Url.startsWith('http:')
}

更新:

如果你想让它内联：

<a href="{{ object.Url}}" 
       newWindow Name="{{ object.Name }}" [isExternalLink]={{ object.Url.startsWith('http:') }} > 
      {{object.Name}} </a>

基于条件如何设置指令的布尔值 - Angular

Based on condition how to set boolean value of a directive - Angular

typescript

angularjs-directive

angular-ng-if

angular