Angular2 * ng如果多个条件

Question

我正在开发angular2示例应用程序。

我添加了1个menuViews对象，它里面有名称，图标和url成员。

在页面我迭代那个工作正常的menuViews。

我有一些场景中，一些URL的将是内部网站的网址一样../app/histoy 但在某些情况下，它是“https://play.google.com/”

以下是我的html代码：

<li *ngFor="let item of menuViews"> 
    <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >    
     <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span> 
    </a>    
</li> 

所以在<a>标签我想把条件，如：

if (item.url.indexOf("http://") == -1 && item.url.indexOf("https://") == -1) { 
    //set value in [routerLink] 
} else { 
    //set value in href 
} 

这样的条件，我想在这个。主要是我想分叉内部和外部链接。

主要问题是，当它外部链接，然后它试图重定向在base url + external link（localhost:4200#home/https://play.google.com）这是错误的，所以我想基于一些条件来管理两者。

其他建议也欢迎..

Answer 1

你可以做类似如下：

<li *ngFor="let item of menuViews"> 
     // This will used for internal links which does not have http 
    <template [ngIf]="item.url.indexOf('http') == -1"> 
     <a class="ripple-effect" [routerLink]="[item.url]" *ngIf="isUserLoggedIn == true" >    
     <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span> 
     </a>    
    </template> 
    // This will used for external links which have http or https and url value is set in href so hover problem also be resolved 
    <template [ngIf]="item.url.indexOf('http') != -1"> 
     <a class="ripple-effect" href="{{item.url}}" *ngIf="isUserLoggedIn == true" >    
     <span class="media-body media-middle" *ngIf="isUserLoggedIn == true">{{item.name}}</span> 
     </a>    
    </template> 
</li> 

让我知道这个作品或不按照您的要求。

好运