javascript - změna prvku v ngOnInit nefunguje při změně trasy, ale je možné k prvku přistupovat

Mám projekt v Angularu s routerem. V ngOnInit komponent chci dynamicky nastavit hodnotu tagu p a href tagu img. Funguje to při počátečním načtení, ale když změním trasy, hodnoty se nemění. Funkce ngOnInit je volána, ale úprava těchto dvou prvků nefunguje.

document.getElementById('discord-tag').innerHTML = username;
document.getElementById('profilePicture').setAttribute('src', image_url)

můj kód je jednoduchý.

Vím, že funkce ngOnInit funguje, protože jsem tam vložil nějaké příkazy console.log na testování a spouští se pokaždé, když kliknu na odkaz trasy.

Odpověď č. 1

V Angularu pracujeme s proměnnými, přímé manipulování s DOM by mělo být poslední možností, pokud není jiná cesta... ALE obvykle existuje „Angular způsob“, jak věci řešit tak, aby nebylo potřeba manipulovat s DOM přímo. To znamená, mít proměnné ve vaší komponentě, které svážete s šablonou, takže ať už tyto hodnoty získáte jakkoli, přiřaďte je do proměnné, v OnInit, nebo na správném místě, kde je máte...

image_url!: string;
username!: string;

ngOnInit() {
  // doing stuff, getting the values... then:
  this.username = 'valueHere';
  this.image_url = 'valueHere';
}

Pak v šabloně použijte toto:

<img [src]="image_url" />

<p>{{username}}</p>

Jak bylo zmíněno v komentáři, jsou to základní věci, takže vás opravdu vyzývám, abyste se podívali na tutoriál na angular.io. Je to dobrý tutoriál a jistě se tam naučíte základy :) https://angular.io/tutorial

Odpověď č. 2

Zkuste ngAfterViewInit() pro změnu 2 prvků.