Question

我从数据库中获取有关组织的信息。这是组织的界面结构：

interface IOrganization {
  id: number;
  name: string;
  url: string;
  createdAt: Date;
}

现在我要像这样显示它们：

<div *ngIf="isloading; else content">
  <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
</div>

<ng-template #content>
  <mat-tab-group>
    <mat-tab label="Organizations List" >
      <mat-card 
        class="example-large-box mat-elevation-z4"
        *ngFor="let org of organizations"
      >
        <mat-nav-list>
          <a mat-list-item href="{{ org.url }}"> {{ org.name }} </a>
        </mat-nav-list>
      </mat-card>
    </mat-tab>
  </mat-tab-group>
</ng-template>

很遗憾，链接无法正常工作。每当我在链接上进行鼠标悬停时，我都会获得包括基本href在内的信息。

假设我的组织链接为www.google.com.，每当有人单击时，用户都应重定向到组织。但是，每当我单击链接时，我都会得到类似的东西。

http:// localhost:4200/organizations/www.google.com

我如何摆脱链接中的基本href，以便用户在单击链接时可以轻松访问google.com？

Answer 1

啊，我得到了答案：

<a mat-list-item [attr.href]="'//'+ org.url "> {{ org.name }} </a>

此代码行解决了该问题。 for more detail please click on this link

Answer 2

问题在于Angular将URL www.google.com视为相对链接，并将其附加到当前路由中，就好像它存在于站点中一样。

您必须使用绝对链接，例如http://www.google.com才能实际转到该站点，而不是将其附加到当前路由。

如何从angular的外部链接中删除base-href？

2 个答案: