javascript - attribute - title html css
Cómo actualizar un componente sin actualizar la página completa-Angular (4)
La estructura de mi página es:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
¿Cómo puedo actualizar / actualizar el componente de
app-header
la
app-header
, sin actualizar toda la página?
Quiero ocultar un enlace "Iniciar sesión" en el encabezado, una vez que el usuario haya iniciado sesión correctamente. El encabezado es común en todos los componentes / rutas.
Angular actualizará automáticamente un componente cuando detecte un cambio variable.
Entonces, todo lo que tiene que hacer para que se "actualice" es asegurarse de que el encabezado tenga una referencia a los nuevos datos.
Esto podría ser a través de una suscripción dentro de
header.component.ts
o mediante una variable
@Input
...
un ejemplo...
main.html
<app-header [header-data]="headerData"></app-header>
main.component.ts
public headerData:int = 0;
ngOnInit(){
setInterval(()=>{this.headerData++;}, 250);
}
header.html
<p>{{data}}</p>
header.ts
@Input(''header-data'') data;
En el ejemplo anterior, el encabezado recibirá los nuevos datos cada 250 ms y, por lo tanto, actualizará el componente.
Para obtener más información sobre los ganchos del ciclo de vida de Angular, consulte: https://angular.io/guide/lifecycle-hooks
Para actualizar componente
@Injectable()
export class LoginService{
private isUserLoggedIn: boolean = false;
public setLoggedInUser(flag) { // you need set header flag true false from other components on basis of your requirements, header component will be visible as per this flag then
this.isUserLoggedIn= flag;
}
public getUserLoggedIn(): boolean {
return this.isUserLoggedIn;
}
Login Component ts
Login Component{
constructor(public service: LoginService){}
public login(){
service.setLoggedInUser(true);
}
}
Inside Header component
Header Component ts
HeaderComponent {
constructor(public service: LoginService){}
public getUserLoggedIn(): boolean { return this.service.getUserLoggedIn()}
}
template of header component: Check for user sign in here
<button *ngIf="getUserLoggedIn()">Sign Out</button>
<button *ngIf="!getUserLoggedIn()">Sign In</button>
Puede usar muchos enfoques como show hide usando ngIf
App Component ts
AppComponent {
public showHeader: boolean = true;
}
App Component html
<div *ngIf=''showHeader''> // you show hide on basis of this ngIf and header component always get visible with it''s lifecycle hook ngOnInit() called all the time when it get visible
<app-header></app-header>
</div>
<router-outlet></router-outlet>
<app-footer></app-footer>
También puedes usar el servicio
@Injectable()
export class AppService {
private showHeader: boolean = false;
public setHeader(flag) { // you need set header flag true false from other components on basis of your requirements, header component will be visible as per this flag then
this.showHeader = flag;
}
public getHeader(): boolean {
return this.showHeader;
}
}
App Component.ts
AppComponent {
constructor(public service: AppService){}
}
App Component.html
<div *ngIf=''service.showHeader''> // you show hide on basis of this ngIf and header component always get visible with it''s lifecycle hook ngOnInit() called all the time when it get visible
<app-header></app-header>
</div>
<router-outlet></router-outlet>
<app-footer></app-footer>
Puede usar un
BehaviorSubject
para comunicarse dentro de diferentes componentes en toda la aplicación.
Puede definir un servicio para compartir datos que contenga el
BehaviorSubject
al que puede suscribirse y emitir cambios.
Definir un servicio para compartir datos.
import { Injectable } from ''@angular/core'';
import { BehaviorSubject } from ''rxjs'';
@Injectable()
export class DataSharingService {
public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}
Agregue
DataSharingService
en su entrada de proveedores de
AppModule
.
A continuación, importe el
DataSharingService
en su
<app-header>
y en el componente donde realiza la operación de inicio de sesión.
En
<app-header>
suscríbase a los cambios en el asunto
isUserLoggedIn
:
import { DataSharingService } from ''./data-sharing.service'';
export class AppHeaderComponent {
// 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;
});
}
}
En su plantilla html
<app-header>
, debe agregar la condición
*ngIf
, por ejemplo:
<button *ngIf="!isUserLoggedIn">Login</button>
<button *ngIf="isUserLoggedIn">Sign Out</button>
Finalmente, solo necesita emitir el evento una vez que el usuario haya iniciado sesión, por ejemplo:
someMethodThatPerformsUserLogin() {
// Some code
// .....
// After the user has logged in, emit the behavior subject changes.
this.dataSharingService.isUserLoggedIn.next(true);
}
Una de las muchas soluciones es crear una clase
@Injectable()
que contenga los datos que desea mostrar en el encabezado.
Otros componentes también pueden acceder a esta clase y alterar estos datos, cambiando efectivamente el encabezado.
Otra opción es configurar las variables
@Input()
y
@Output()
EventEmitters que puede usar para alterar los datos del encabezado.
Edite ejemplos como solicitó:
@Injectable()
export class HeaderService {
private _data;
set data(value) {
this._data = value;
}
get data() {
return this._data;
}
}
en otro componente:
constructor(private headerService: HeaderService) {}
// Somewhere
this.headerService.data = ''abc'';
en el componente del encabezado:
let headerData;
constructor(private headerService: HeaderService) {
this.headerData = this.headerService.data;
}
En realidad no he intentado esto. Si get / set no funciona, puede cambiarlo para usar un Asunto ();
// Simple Subject() example:
let subject = new Subject();
this.subject.subscribe(response => {
console.log(response); // Logs ''hello''
});
this.subject.next(''hello'');