它可能更容易完成，例如（Typescript）：
自定义组件mat-chip-link的模板

<mat-chip (click)="this.clickEventHandler($event)">
  <ng-content>
  </ng-content>
</mat-chip>

字符串

组件

@Component({
  selector: 'app-mat-chip-link',
  template: './mat-chip-link.component.html',
  styleUrls: ['./mat-chip-link.component.scss']
})
export class MatChipLink{
  private _href: string | null = null;

  @Input('href') public set href(value: string | null) {
    this._href = value;
  }

  public clickEventHandler(e: MouseEvent) {
    if(this._href !== null) {
      window.open(this._href, '_blank');
    } else {
      console.log('Href is null.');
    }
  }
}

型

用法

<app-mat-chip-link [href]="https://www.stackoverflow.com">
  <img src='../../assets/image.png'/>Jump to StackOverflow 🙌🏼
</app-mat-chip-link>

型

像这样的东西怎么样：
你可以创建一个类似'mat-chip-link'的组件：

<mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">

  <ng-content select="[.beforeLink]"></ng-content>

  <a
    [href]="link"
    class="mat-standard-chip"
    target="_blank"
    style="margin: 0; padding: 0"
    >My link</a
  >
  
  <ng-content select="[.afterLink]"></ng-content>
</mat-chip>

字符串
（我不确定ng-content选择器，请查看这里的文档以获取更多信息。https://angular.io/guide/content-projection）。
然后从父组件中调用这个组件

<mat-chip-link *ngFor="let fruit of fruits" (removed)="remove(fruit)" [link]="test"> 
  <mat-icon matChipRemove class="beforeLink" *ngIf="editable">cancel</mat-icon>
  <mat-icon matChipRemove class="afterLink" *ngIf="removable">cancel</mat-icon>
</mat-chip>

型