有没有一种方法可以动态改变Angular中的属性的href元素？

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  url = 'https://www.example.com';
}

<!-- app.component.html -->
<a [href]="url">Visit Example</a>

// app.component.ts
export class AppComponent {
  url = 'https://www.example.com';

  changeUrl() {
    this.url = 'https://www.new-example.com';
  }
}

<!-- app.component.html -->
<button (click)="changeUrl()">Change URL</button>
<a [href]="url">Visit Example</a>

import { ChangeDetectorRef } from '@angular/core';

export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  changeUrl() {
    this.url = 'https://www.new-example.com';
    this.cdr.detectChanges();
  }
}

import { Observable } from 'rxjs';

export class AppComponent {
  url$: Observable<string>;

  constructor() {
    this.url$ = someObservableService.getUrl();
  }
}

<a [href]="url$ | async">Visit Example</a>