ਐਂਗੁਲਰ 2 ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਦੀਆਂ ਆਮ ਸਮੱਸਿਆਵਾਂ: 'ਐਪ-ਪ੍ਰੋਜੈਕਟ-ਲਿਸਟ' ਗਲਤੀ ਨੂੰ ਪਛਾਣਨਾ ਅਤੇ ਹੱਲ ਕਰਨਾ

ਐਂਗੁਲਰ 2 ਕੰਪੋਨੈਂਟ ਏਕੀਕਰਣ ਦਾ ਨਿਪਟਾਰਾ ਕਰਨਾ

Angular 2 ਇੱਕ ਪ੍ਰਸਿੱਧ ਫਰੇਮਵਰਕ ਹੈ ਜਿਸਨੂੰ ਡਿਵੈਲਪਰ ਡਾਇਨਾਮਿਕ ਵੈਬ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਵਰਤਦੇ ਹਨ। ਐਂਗੁਲਰ 2 ਨਾਲ ਸ਼ੁਰੂ ਕਰਦੇ ਸਮੇਂ, ਸ਼ੁਰੂਆਤ ਕਰਨ ਵਾਲਿਆਂ ਨੂੰ ਇੱਕ ਚੁਣੌਤੀ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਅੰਦਰ ਕੰਪੋਨੈਂਟਾਂ ਦੀ ਰਚਨਾ ਅਤੇ ਸਹੀ ਏਕੀਕਰਣ। ਇੱਕ ਆਮ ਸਮੱਸਿਆ ਉਦੋਂ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਨਵੇਂ ਭਾਗ ਸਹੀ ਢੰਗ ਨਾਲ ਰਜਿਸਟਰ ਨਹੀਂ ਹੁੰਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਸੰਕਲਨ ਜਾਂ ਰਨਟਾਈਮ ਦੌਰਾਨ ਕਈ ਤਰ੍ਹਾਂ ਦੇ ਗਲਤੀ ਸੁਨੇਹੇ ਆਉਂਦੇ ਹਨ।

ਇਸ ਦ੍ਰਿਸ਼ ਵਿੱਚ, ਗਲਤੀ ਖਾਸ ਤੌਰ 'ਤੇ ` ਨਾਲ ਇੱਕ ਸਮੱਸਿਆ ਦਾ ਜ਼ਿਕਰ ਕਰਦੀ ਹੈ'ਕੰਪੋਨੈਂਟ। ਇਹ ਸਮੱਸਿਆ ਆਮ ਤੌਰ 'ਤੇ ਉਦੋਂ ਵਾਪਰਦੀ ਹੈ ਜਦੋਂ ਕੋਈ ਭਾਗ ਜਾਂ ਤਾਂ ਮੋਡੀਊਲ ਘੋਸ਼ਣਾਵਾਂ ਵਿੱਚੋਂ ਗੁੰਮ ਹੁੰਦਾ ਹੈ ਜਾਂ ਮਾਡਿਊਲ ਦੇ ਆਯਾਤ ਦੇ ਅੰਦਰ ਗਲਤ ਢੰਗ ਨਾਲ ਕੌਂਫਿਗਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਤਰੁੱਟੀਆਂ ਨਵੇਂ ਐਂਗੁਲਰ ਡਿਵੈਲਪਰਾਂ ਲਈ ਨਿਰਾਸ਼ਾਜਨਕ ਹੋ ਸਕਦੀਆਂ ਹਨ, ਪਰ ਉਹਨਾਂ ਨੂੰ ਅਕਸਰ ਮੋਡੀਊਲ ਬਣਤਰ ਵਿੱਚ ਕੁਝ ਮੁੱਖ ਵਿਵਸਥਾਵਾਂ ਨਾਲ ਹੱਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਜਦੋਂ ਇਹਨਾਂ ਵਰਗੀਆਂ ਤਰੁੱਟੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਦੋ ਵਾਰ ਜਾਂਚ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੀ `app.module.ts` ਫਾਈਲ ਵਿੱਚ ਭਾਗਾਂ ਨੂੰ ਕਿਵੇਂ ਆਯਾਤ ਅਤੇ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਐਂਗੁਲਰ ਮੋਡੀਊਲ ਅਤੇ ਕੰਪੋਨੈਂਟ ਆਯਾਤ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਬੰਧਨ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਭਾਗ ਐਪਲੀਕੇਸ਼ਨ ਦੇ ਅੰਦਰ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦੇ ਹਨ।

ਇਸ ਗਾਈਡ ਵਿੱਚ, ਅਸੀਂ ਤੁਹਾਡੇ 'ਐਪ-ਪ੍ਰੋਜੈਕਟ-ਲਿਸਟ' ਕੰਪੋਨੈਂਟ ਦੇ ਨਾਲ ਤੁਹਾਡੇ ਦੁਆਰਾ ਸਾਹਮਣਾ ਕਰ ਰਹੇ ਗਲਤੀ ਨੂੰ ਤੋੜ ਦੇਵਾਂਗੇ ਅਤੇ ਇਸਨੂੰ ਠੀਕ ਕਰਨ ਲਈ ਸਪਸ਼ਟ ਕਦਮ ਪ੍ਰਦਾਨ ਕਰਾਂਗੇ। ਇਹਨਾਂ ਸੰਕਲਪਾਂ ਨੂੰ ਸਮਝ ਕੇ, ਤੁਸੀਂ ਭਵਿੱਖ ਵਿੱਚ ਸਮਾਨ ਮੁੱਦਿਆਂ ਦਾ ਨਿਪਟਾਰਾ ਕਰਨ ਦੇ ਯੋਗ ਹੋਵੋਗੇ ਅਤੇ ਆਪਣੀਆਂ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨੂੰ ਹੋਰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਬਣਾ ਸਕੋਗੇ।

ਐਂਗੁਲਰ 2 ਕੰਪੋਨੈਂਟ ਮੁੱਦਿਆਂ ਦੇ ਹੱਲ ਨੂੰ ਸਮਝਣਾ

ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਵਿੱਚ, ਮੁੱਖ ਉਦੇਸ਼ ਸਹੀ ਢੰਗ ਨਾਲ ਸੰਰਚਿਤ ਕਰਨਾ ਅਤੇ ਘੋਸ਼ਣਾ ਕਰਨਾ ਹੈ ਪ੍ਰੋਜੈਕਟਲਿਸਟ ਕੰਪੋਨੈਂਟ ਇੱਕ ਐਂਗੁਲਰ 2 ਪ੍ਰੋਜੈਕਟ ਦੇ ਅੰਦਰ. ਤੁਹਾਡੇ ਦੁਆਰਾ ਆਈ ਗਲਤੀ ਜਾਂ ਤਾਂ ਗੁੰਮ ਹੋਏ ਕੰਪੋਨੈਂਟ ਘੋਸ਼ਣਾਵਾਂ ਜਾਂ ਐਪ ਮੋਡੀਊਲ ਦੇ ਅੰਦਰ ਇੱਕ ਗਲਤ ਸੰਰਚਨਾ ਨਾਲ ਸਬੰਧਤ ਹੈ। ਪ੍ਰਦਾਨ ਕੀਤਾ ਪਹਿਲਾ ਹੱਲ ਇਹ ਯਕੀਨੀ ਬਣਾ ਕੇ ਇਸ ਨੂੰ ਸੰਬੋਧਿਤ ਕਰਦਾ ਹੈ ਕਿ ਪ੍ਰੋਜੈਕਟਲਿਸਟ ਕੰਪੋਨੈਂਟ 'AppModule' ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਆਯਾਤ ਅਤੇ ਘੋਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਸ ਵਿੱਚ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ @NgModule ਸਜਾਵਟ, ਜੋ ਕਿ ਮੋਡੀਊਲ ਬਣਤਰ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਮੁੱਖ ਕਮਾਂਡਾਂ ਵਿੱਚ 'ਘੋਸ਼ਣਾ' ਸ਼ਾਮਲ ਹੁੰਦੀ ਹੈ ਜਿੱਥੇ ਕੰਪੋਨੈਂਟ ਰਜਿਸਟਰ ਹੁੰਦੇ ਹਨ, ਅਤੇ 'ਆਯਾਤ', ਜੋ ਕਿ 'ਬ੍ਰਾਊਜ਼ਰ ਮੋਡਿਊਲ' ਵਰਗੇ ਹੋਰ ਜ਼ਰੂਰੀ ਮੋਡੀਊਲਾਂ ਦੇ ਏਕੀਕਰਣ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ।

ਖਾਸ ਮੁੱਦਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਜੋ ਅਕਸਰ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਨਾਲ ਵਾਪਰਦਾ ਹੈ, ਵੈਬ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਗੁੰਮ ਕਸਟਮ ਐਲੀਮੈਂਟ ਸਕੀਮਾਂ ਨਾਲ ਸਬੰਧਤ ਗਲਤੀ ਹੈ। ਇਸ ਨੂੰ ਸੰਬੋਧਿਤ ਕਰਨ ਲਈ, ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਪੇਸ਼ ਕਰਦੀ ਹੈ CUSTOM_ELEMENTS_SCHEMA, ਜਿਸ ਨੂੰ `@NgModule` ਵਿੱਚ `schemas` ਐਰੇ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਸਕੀਮਾ ਐਂਗੁਲਰ ਨੂੰ ਕਸਟਮ HTML ਟੈਗਸ ਦੀ ਪਛਾਣ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ, ਜੋ ਕਿ ਐਂਗੁਲਰ ਦੇ ਮਿਆਰੀ ਭਾਗ ਢਾਂਚੇ ਦਾ ਹਿੱਸਾ ਨਹੀਂ ਹਨ। ਇਸ ਤੋਂ ਬਿਨਾਂ, ਜਦੋਂ ਵੀ ਇਹ ਅਣਜਾਣ ਟੈਗਸ ਦਾ ਸਾਹਮਣਾ ਕਰਦਾ ਹੈ ਤਾਂ ਐਂਗੁਲਰ ਗਲਤੀਆਂ ਸੁੱਟਦਾ ਹੈ, ਇਹ ਮੰਨ ਕੇ ਕਿ ਉਹ ਗਲਤ ਤਰੀਕੇ ਨਾਲ ਘੋਸ਼ਿਤ ਕੀਤੇ ਗਏ ਹਨ।

ਦੂਜਾ ਹੱਲ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਨਾਲ ਸੰਬੰਧਿਤ ਹੈ ਕਿ ਕੰਪੋਨੈਂਟ ਆਪਣੇ ਆਪ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਇੱਕ ਸੇਵਾ (`ਪ੍ਰੋਜੈਕਟ ਸਰਵਿਸ`) ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਜਿਸ ਨੂੰ ਐਂਗੂਲਰ ਦੇ ਨਿਰਭਰਤਾ ਇੰਜੈਕਸ਼ਨ ਸਿਸਟਮ ਰਾਹੀਂ `ਪ੍ਰੋਜੈਕਟਲਿਸਟ ਕੰਪੋਨੈਂਟ` ਵਿੱਚ ਇੰਜੈਕਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। 'ngOnInit' ਲਾਈਫਸਾਈਕਲ ਹੁੱਕ ਵਿੱਚ, 'subscribe' ਵਿਧੀ ਅਸਿੰਕਰੋਨਸ ਤੌਰ 'ਤੇ ਪ੍ਰੋਜੈਕਟ ਡੇਟਾ ਨੂੰ ਮੁੜ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਸਿੰਕ੍ਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਅਤੇ APIs ਵਰਗੇ ਬਾਹਰੀ ਸਰੋਤਾਂ ਤੋਂ ਡੇਟਾ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਲਈ ਐਂਗੁਲਰ ਵਿੱਚ ਇੱਕ ਆਮ ਪੈਟਰਨ ਹੈ। 'OnInit' ਇੰਟਰਫੇਸ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਡਾਟਾ-ਫਚਿੰਗ ਤਰਕ ਕੰਪੋਨੈਂਟ ਦੇ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਤੁਰੰਤ ਬਾਅਦ ਚੱਲਦਾ ਹੈ।

ਅੰਤਮ ਹੱਲ ਟੈਸਟਿੰਗ 'ਤੇ ਕੇਂਦ੍ਰਿਤ ਹੈ। ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਕਿਸੇ ਵੀ ਐਂਗੁਲਰ ਪ੍ਰੋਜੈਕਟ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਹੈ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਭਾਗ ਅਤੇ ਸੇਵਾਵਾਂ ਉਮੀਦ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦੀਆਂ ਹਨ। ਪ੍ਰਦਾਨ ਕੀਤੀ ਟੈਸਟ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, 'TestBed' ਉਪਯੋਗਤਾ ਨੂੰ ਇੱਕ ਟੈਸਟ ਵਾਤਾਵਰਨ ਵਿੱਚ ਭਾਗ ਨੂੰ ਸੈੱਟ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। 'beforeEach' ਫੰਕਸ਼ਨ ਹਰੇਕ ਟੈਸਟ ਤੋਂ ਪਹਿਲਾਂ ਕੰਪੋਨੈਂਟ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ, ਜਦੋਂ ਕਿ 'ਕੰਪੋਨੈਂਟ ਫਿਕਸਚਰ' ਟੈਸਟ ਦੌਰਾਨ ਕੰਪੋਨੈਂਟ ਨਾਲ ਸਿੱਧੇ ਇੰਟਰੈਕਸ਼ਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ। ਇਹ ਟੈਸਟਿੰਗ ਫਰੇਮਵਰਕ ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਭਾਗ ਨਾ ਸਿਰਫ਼ ਇੱਕ ਅਸਲ ਵਾਤਾਵਰਣ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ, ਸਗੋਂ ਇਹ ਵੀ ਕਿ ਇਹ ਟੈਸਟ ਵਾਤਾਵਰਨ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸਥਿਤੀਆਂ ਵਿੱਚ ਉਮੀਦ ਅਨੁਸਾਰ ਵਿਹਾਰ ਕਰਦਾ ਹੈ। ਐਂਗੁਲਰ ਡਿਵੈਲਪਮੈਂਟ ਵਿੱਚ ਵਧੀਆ ਅਭਿਆਸਾਂ ਨੂੰ ਲਾਗੂ ਕਰਦੇ ਹੋਏ ਇਹ ਸਕ੍ਰਿਪਟਾਂ ਸਮੂਹਿਕ ਤੌਰ 'ਤੇ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦੀਆਂ ਹਨ।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProjectListComponent } from './components/project-list/project-list.component';

@NgModule({
  declarations: [AppComponent, ProjectListComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../../services/project.service';
import { Project } from '../../models/Project';

@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.scss']
})
export class ProjectListComponent implements OnInit {
  projects: Project[] = [];
  constructor(private projectService: ProjectService) { }

  ngOnInit(): void {
    this.projectService.getProjects().subscribe(data => {
      this.projects = data;
    });
  }
}

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProjectListComponent } from './components/project-list/project-list.component';

@NgModule({
  declarations: [AppComponent, ProjectListComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

import { TestBed } from '@angular/core/testing';
import { ProjectListComponent } from './project-list.component';
import { ProjectService } from '../../services/project.service';

describe('ProjectListComponent', () => {
  let component: ProjectListComponent;
  let fixture: ComponentFixture<ProjectListComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ ProjectListComponent ],
      providers: [ProjectService]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ProjectListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the component', () => {
    expect(component).toBeTruthy();
  });
});

ਐਂਗੁਲਰ 2 ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਕਮਿਊਨੀਕੇਸ਼ਨ ਦੀ ਪੜਚੋਲ ਕਰਨਾ

ਐਂਗੁਲਰ 2 ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਧਾਰਨਾ ਇਹ ਹੈ ਕਿ ਕਿਵੇਂ ਵੱਖ-ਵੱਖ ਹਿੱਸੇ ਇੱਕ ਦੂਜੇ ਨਾਲ ਸੰਚਾਰ ਕਰਦੇ ਹਨ। ਇੱਕ ਗੁੰਝਲਦਾਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਅਕਸਰ ਡੇਟਾ ਨੂੰ ਸਾਂਝਾ ਕਰਨ ਜਾਂ ਇੱਕ ਦੂਜੇ ਨੂੰ ਤਬਦੀਲੀਆਂ ਬਾਰੇ ਸੂਚਿਤ ਕਰਨ ਲਈ ਭਾਗਾਂ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਐਂਗੁਲਰ 2 ਇਸ ਸੰਚਾਰ ਦੀ ਸਹੂਲਤ ਲਈ ਕਈ ਵਿਧੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਸਮੇਤ ਇੰਪੁੱਟ ਅਤੇ ਆਉਟਪੁੱਟ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਸੇਵਾਵਾਂ ਅਤੇ ਈਵੈਂਟ ਈਮੀਟਰ। ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਇੱਕ ਚਾਈਲਡ ਕੰਪੋਨੈਂਟ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਨੂੰ ਡਾਟਾ ਵਾਪਸ ਭੇਜ ਸਕਦਾ ਹੈ, ਜਾਂ ਇੱਕ ਮਾਤਾ ਜਾਂ ਪਿਤਾ ਆਪਣੇ ਚਾਈਲਡ ਕੰਪੋਨੈਂਟ ਨੂੰ ਡੇਟਾ ਭੇਜ ਸਕਦੇ ਹਨ। ਕਈ ਹਿੱਸਿਆਂ ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਡੇਟਾ ਅਪਡੇਟਾਂ ਨਾਲ ਨਜਿੱਠਣ ਵੇਲੇ ਇਸ ਨੂੰ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ।

ਐਂਗੁਲਰ ਦਾ ਸੇਵਾਵਾਂ ਉਹਨਾਂ ਕੰਪੋਨੈਂਟਾਂ ਵਿਚਕਾਰ ਸੰਚਾਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣ ਵਿੱਚ ਵੀ ਮੁੱਖ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੀ ਹੈ ਜੋ ਕੰਪੋਨੈਂਟ ਲੜੀ ਵਿੱਚ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸੰਬੰਧਿਤ ਨਹੀਂ ਹਨ। ਇੱਕ ਸੇਵਾ ਬਣਾ ਕੇ ਅਤੇ ਇਸ ਨੂੰ ਲੋੜੀਂਦੇ ਭਾਗਾਂ ਵਿੱਚ ਇੰਜੈਕਟ ਕਰਕੇ, ਤੁਸੀਂ ਡਾਟਾ ਅਤੇ ਸਟੇਟਸ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਸਾਂਝਾ ਕਰ ਸਕਦੇ ਹੋ। ਇਸ ਪੈਟਰਨ ਨੂੰ ਸਾਂਝੀ ਸੇਵਾ ਵਜੋਂ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਡੀ-ਕਪਲਡ ਰਹਿੰਦੇ ਹਨ ਜਦੋਂ ਕਿ ਉਹਨਾਂ ਨੂੰ ਸੰਚਾਰ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦੇ ਹੋਏ, ਤੁਹਾਡੇ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਬਿਹਤਰ ਸੰਗਠਨ ਅਤੇ ਸਾਂਭ-ਸੰਭਾਲ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦੇ ਹੋਏ।

ਦੀ ਵਰਤੋਂ ਦਾ ਇਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ਾ ਹੈ ਨਿਰੀਖਣਯੋਗ ਐਂਗੁਲਰ 2 ਵਿੱਚ. ਆਬਜ਼ਰਵੇਬਲਸ, ਜੋ ਕਿ RxJS ਦਾ ਹਿੱਸਾ ਹਨ, ਤੁਹਾਨੂੰ ਅਸਿੰਕਰੋਨਸ ਡੇਟਾ ਸਟ੍ਰੀਮਾਂ, ਜਿਵੇਂ ਕਿ HTTP ਬੇਨਤੀਆਂ ਜਾਂ ਉਪਭੋਗਤਾ ਇਨਪੁਟ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹਨ। ਉਹ APIs ਤੋਂ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਡੇਟਾ ਦੇ ਬਦਲਣ 'ਤੇ ਦ੍ਰਿਸ਼ ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਲਈ ਐਂਗੁਲਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਬਹੁਤ ਜ਼ਿਆਦਾ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਆਬਜ਼ਰਵੇਬਲਸ ਦਾ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਅਤੇ 'ਮੈਪ', 'ਫਿਲਟਰ', ਅਤੇ 'ਸਬਸਕ੍ਰਾਈਬ' ਵਰਗੇ ਓਪਰੇਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਡੇ ਐਂਗੁਲਰ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਉਪਭੋਗਤਾ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ ਵਧੇਰੇ ਕੁਸ਼ਲ ਅਤੇ ਜਵਾਬਦੇਹ ਬਣਾਉਣ ਦੀ ਕੁੰਜੀ ਹੈ।