Question

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

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

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

我有一些方案，有些网址会像../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>

根据您的要求，让我知道这是否有效。

祝你好运

Answer 2

你可以简单地使用如下

    <pre><code>`df1
     [,1] [,2]
[1,]    1  101
[2,]    2  202
[3,]    3  303`

    <pre><code>`df2
     [,1]
[1,]  101
[2,]  202
[3,]  303
[4,]  404`

Answer 3

就我的问题而言，我建议执行此事

HTML中的

<li *ngFor="let item of menuViews">

     //just remove your href from <a> tag and use (click) event

     <a class="ripple-effect" (click)="onClick($event)" 
        *ngIf="isUserLoggedIn == true" >             
        <span class="media-body media-middle" 
           *ngIf="isUserLoggedIn == true">{{item.name}}
        </span>
     </a>            
</li>

在TS文件中

onClick(event){
    //Your other code lies here
     if (item.url.indexOf("http://") == -1 && item.url.indexOf("https://") == -1) {
          //set value in [routerLink]
      } else {
          //set value in href
      }
    //Your other code lies here
}

Angular2 * ngIf多重条件

3 个答案: