Tengo un proyecto angular con un enrutador. En ngOnInits para los componentes, quiero establecer dinámicamente el valor de las etiquetas aap y un href de etiquetas img. Funciona en la carga inicial, pero cuando cambio de ruta, los valores no cambian. Se llama a la función ngOnInit, pero la edición de los dos elementos no funciona.
document.getElementById('discord-tag').innerHTML = username; document.getElementById('profilePicture').setAttribute('src', image_url)mi código es simple.
Sé que la función ngOnInit está funcionando porque puse algunas declaraciones de console.log allí para probar y se ejecutan cada vez que hago clic en un enlace de ruta.
Pruebe ngAfterViewInit() para cambiar 2 elementos.
En Angular trabajamos con variables, manipular el DOM directamente debería ser el último recurso, si no hay otra manera... PERO, generalmente hay una "forma Angular" de manejar las cosas para que no necesites manipular el DOM directamente. Dicho esto, tenga variables en su componente, que vincula a la plantilla, así que, sin importar cómo obtenga esos valores, asígnelos a la variable, en OnInit, o al lugar adecuado donde los tiene...
image_url!: string; username!: string; ngOnInit() { // doing stuff, getting the values... then: this.username = 'valueHere'; this.image_url = 'valueHere'; }Luego, en la plantilla, use estos:
<img [src]="image_url" /> <p>{{username}}</p>Como se mencionó en el comentario, estas son cosas básicas, por lo que realmente le recomiendo que consulte el tutorial en angular.io. Es un buen tutorial y seguramente aprenderás los conceptos básicos allí :) https://angular.io/tutorial