javascript - पूर्ण पृष्ठ को रिफ्रेश किए बिना कंपोनेंट को कैसे अपडेट करें-कोणीय




angular refresh (3)

मेरा पृष्ठ संरचना है:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

मैं पूरे पृष्ठ को ताज़ा किए बिना app-header घटक को कैसे अपडेट / ताज़ा कर सकता हूं?

मैं हेडर में एक "साइन-इन" लिंक को छिपाना चाहता हूं, एक बार उपयोगकर्ता ने सफलतापूर्वक लॉग इन किया था। हेडर सभी घटकों या मार्गों में सामान्य है।


आप ऐप में विभिन्न घटकों के भीतर संवाद के लिए एक BehaviorSubject उपयोग कर सकते हैं। आप एक डेटा साझाकरण सेवा को परिभाषित कर सकते हैं जिसमें BehaviorSubject है जिसमें आप सदस्यता ले सकते हैं और परिवर्तन का उत्सर्जन कर सकते हैं।

डेटा शेयरिंग सेवा को परिभाषित करें

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataSharingService {
    public isUserLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
}

अपने AppModule प्रदाताओं प्रविष्टि में AppModule जोड़ें।

इसके बाद, अपने <app-header> और उस घटक में जहां आप साइन-इन ऑपरेशन करते हैं, DataSharingService को आयात करें। <app-header> 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;
        });
    }
}

अपने <app-header> html टेम्पलेट में, आपको *ngIf कंडीशन को जोड़ना होगा जैसे:

<button *ngIf="!isUserLoggedIn">Login</button> 
<button *ngIf="isUserLoggedIn">Sign Out</button>

उपयोगकर्ता द्वारा लॉग इन करने के बाद, अंत में, आपको ईवेंट का उत्सर्जन करने की आवश्यकता है:

someMethodThatPerformsUserLogin() {
    // Some code 
    // .....
    // After the user has logged in, emit the behavior subject changes.
    this.dataSharingService.isUserLoggedIn.next(true);
}

कई समाधानों में से एक @Injectable() वर्ग बनाना है जो उस डेटा को रखता है जिसे आप हेडर में दिखाना चाहते हैं। अन्य घटक भी इस वर्ग तक पहुंच सकते हैं और इस डेटा को बदल सकते हैं, प्रभावी रूप से हेडर बदल सकते हैं।

एक अन्य विकल्प @Input() चर और @Output() EventEmitters स्थापित करना है जिसका उपयोग आप हेडर डेटा को बदलने के लिए कर सकते हैं।

आपके अनुरोध के अनुसार उदाहरण संपादित करें :

@Injectable()
export class HeaderService {
    private _data;
    set data(value) {
        this._data = value;
    }
    get data() {
        return this._data;
    }
}

अन्य घटक में:

constructor(private headerService: HeaderService) {}

// Somewhere
this.headerService.data = 'abc';

हेडर घटक में:

let headerData;

constructor(private headerService: HeaderService) {
    this.headerData = this.headerService.data;
}

मैं वास्तव में यह कोशिश नहीं की है। यदि प्राप्त / सेट काम नहीं करता है, तो आप इसे एक विषय () का उपयोग करने के लिए बदल सकते हैं;

// Simple Subject() example:
let subject = new Subject();
this.subject.subscribe(response => {
  console.log(response); // Logs 'hello'
});
this.subject.next('hello');

जब यह परिवर्तनशील परिवर्तन का पता लगाता है तो कोणीय स्वचालित रूप से एक घटक को अपडेट करेगा।

इसलिए आपको इसके लिए "ताज़ा" करना होगा यह सुनिश्चित करना है कि हेडर में नए डेटा का संदर्भ है। यह header.component.ts भीतर या @Input चर के माध्यम से एक सदस्यता के माध्यम से हो सकता है ...

एक उदाहरण...

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;

उपरोक्त उदाहरण में, हेडर प्रत्येक 250ms में नए डेटा को प्राप्त करेगा और इस प्रकार घटक को अपडेट करेगा।

कोणीय जीवन चक्र हुक के बारे में अधिक जानकारी के लिए, देखें: https://angular.io/guide/lifecycle-hooks





angular-components