Saltar al contenido

actualizar el contenido div sin recargar la página ejemplo de código angular 8

Basta ya de investigar por todo internet ya que llegaste al lugar perfecto, contamos con la respuesta que buscas y sin problema.

Ejemplo 1: página de actualización angular sin recargar

this.router.navigate(['path/to']).then(()=>
    window.location.reload(););

Ejemplo 2: componente de actualización angular sin recargar la página

/*You can use a BehaviorSubject for communicating between different 
components throughout the app. 
You can define a data sharing service containing the BehaviorSubject to 
which you can subscribe and emit changes.

Define a data sharing service
*/import Injectable from'@angular/core';import BehaviorSubject from'rxjs';

@Injectable()exportclassDataSharingServicepublic isUserLoggedIn: BehaviorSubject<boolean>=newBehaviorSubject<boolean>(false);/*Add the DataSharingService in your AppModule providers entry.

Next, import the DataSharingService in your  and in the 
component where you perform the sign-in operation. In  
subscribe to the changes to isUserLoggedIn subject:
*/import DataSharingService from'./data-sharing.service';exportclassAppHeaderComponent// Define a variable to use for showing/hiding the Login button
    isUserLoggedIn:boolean;constructor(private dataSharingService: DataSharingService)// Subscribe here, this will automatically update // "isUserLoggedIn" whenever a change to the subject is made.this.dataSharingService.isUserLoggedIn.subscribe( value =>this.isUserLoggedIn = value;);/*In your  html template, you need to add the *ngIf 
condition e.g.:
*/<button *ngIf="!isUserLoggedIn">Login</button><button *ngIf="isUserLoggedIn">Sign Out</button>// Finally, you just need to emit the event once the user has logged in e.g:someMethodThatPerformsUserLogin()// Some code // .....// After the user has logged in, emit the behavior subject changes.this.dataSharingService.isUserLoggedIn.next(true);

Comentarios y valoraciones

Nos puedes añadir valor a nuestro contenido informacional contribuyendo tu experiencia en las referencias.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *