கோண 2 கூறு உருவாக்கத்தில் உள்ள பொதுவான சிக்கல்கள்: 'ஆப்-பிராஜெக்ட்-லிஸ்ட்' பிழையை அங்கீகரித்து சரிசெய்தல்

கோண 2 கூறு ஒருங்கிணைப்பு சரிசெய்தல்

கோண 2 என்பது டெவலப்பர்கள் மாறும் வலைப் பயன்பாடுகளை உருவாக்கப் பயன்படுத்தும் பிரபலமான கட்டமைப்பாகும். Angular 2 இல் தொடங்கும் போது, ​​தொடக்கநிலையாளர்கள் எதிர்கொள்ளும் சவால்களில் ஒன்று, ஒரு பயன்பாட்டிற்குள் கூறுகளை உருவாக்குதல் மற்றும் சரியான ஒருங்கிணைப்பு ஆகும். புதிய கூறுகள் சரியாகப் பதிவு செய்யப்படாதபோது ஒரு பொதுவான சிக்கல் எழுகிறது, இது தொகுத்தல் அல்லது இயக்க நேரத்தின் போது பல்வேறு பிழைச் செய்திகளுக்கு வழிவகுக்கும்.

இந்தச் சூழ்நிலையில், பிழை குறிப்பாக ` உடன் ஒரு சிக்கலைக் குறிப்பிடுகிறது`கூறு. தொகுதி அறிவிப்புகளில் இருந்து ஒரு கூறு காணவில்லை அல்லது தொகுதியின் இறக்குமதியில் தவறாக உள்ளமைக்கப்படும் போது இந்த சிக்கல் பொதுவாக ஏற்படுகிறது. இந்த பிழைகள் புதிய கோண டெவலப்பர்களுக்கு வெறுப்பாக இருக்கலாம், ஆனால் அவை பெரும்பாலும் தொகுதி கட்டமைப்பில் சில முக்கிய மாற்றங்களுடன் தீர்க்கப்படுகின்றன.

இதுபோன்ற பிழைகளைச் சந்திக்கும் போது, ​​உங்களின் `app.module.ts` கோப்பில் கூறுகள் எவ்வாறு இறக்குமதி செய்யப்பட்டு அறிவிக்கப்படுகின்றன என்பதை இருமுறை சரிபார்க்க வேண்டியது அவசியம். பயன்பாட்டிற்குள் உதிரிபாகங்கள் எதிர்பார்த்தபடி செயல்படுவதை உறுதிசெய்ய, கோண தொகுதிகள் மற்றும் கூறு இறக்குமதிகளை சரியாக நிர்வகிப்பது அவசியம்.

இந்த வழிகாட்டியில், உங்கள் `ஆப்-பிராஜெக்ட்-லிஸ்ட்` பாகத்தில் நீங்கள் எதிர்கொள்ளும் பிழையை நாங்கள் உடைத்து, அதைச் சரிசெய்வதற்கான தெளிவான வழிமுறைகளை வழங்குவோம். இந்தக் கருத்துகளைப் புரிந்துகொள்வதன் மூலம், எதிர்காலத்தில் இதுபோன்ற சிக்கல்களைச் சரிசெய்து, உங்கள் கோணப் பயன்பாடுகளை மிகவும் திறமையாக உருவாக்க முடியும்.

கோண 2 கூறு சிக்கல்களுக்கான தீர்வைப் புரிந்துகொள்வது

வழங்கப்பட்ட ஸ்கிரிப்ட்களில், முக்கிய நோக்கம் சரியாக உள்ளமைத்து அறிவிப்பதாகும் திட்டப்பட்டியல் கூறு ஒரு கோண 2 திட்டத்திற்குள். நீங்கள் சந்தித்த பிழையானது, விடுபட்ட கூறு அறிவிப்புகள் அல்லது ஆப்ஸ் மாட்யூலில் உள்ள தவறான உள்ளமைவுடன் தொடர்புடையது. வழங்கப்பட்ட முதல் தீர்வு இதை உறுதி செய்வதன் மூலம் நிவர்த்தி செய்கிறது திட்டப்பட்டியல் கூறு சரியாக இறக்குமதி செய்யப்பட்டு `AppModule` இல் அறிவிக்கப்பட்டது. இது பயன்படுத்துவதை உள்ளடக்கியது @NgModule அலங்கரிப்பாளர், இது தொகுதி கட்டமைப்பை வரையறுக்கிறது. முக்கிய கட்டளைகளில் கூறுகள் பதிவுசெய்யப்பட்ட `பிரகடனங்கள்` மற்றும் `இறக்குமதி` ஆகியவை அடங்கும், இது `BrowserModule` போன்ற பிற தேவையான தொகுதிகளின் ஒருங்கிணைப்பைக் கையாளுகிறது.

கோண பயன்பாடுகளில் அடிக்கடி நிகழும் குறிப்பிட்ட சிக்கல்களில் ஒன்று, வலை கூறுகளைப் பயன்படுத்தும் போது தனிப்பயன் உறுப்பு ஸ்கீமாக்கள் விடுபட்டது தொடர்பான பிழை ஆகும். இதை நிவர்த்தி செய்ய, ஸ்கிரிப்ட் பயன்பாட்டை அறிமுகப்படுத்துகிறது CUSTOM_ELEMENTS_SCHEMA, இது `@NgModule` இல் உள்ள `ஸ்கீமாஸ்` வரிசையில் சேர்க்கப்பட்டது. இந்த ஸ்கீமா, கோணத்தின் நிலையான கூறு கட்டமைப்பின் ஒரு பகுதியாக இல்லாத தனிப்பயன் HTML குறிச்சொற்களை அங்கீகரிக்க கோணலை அனுமதிக்கிறது. இது இல்லாமல், கோணமானது, அறிமுகமில்லாத குறிச்சொற்களை எதிர்கொள்ளும் போதெல்லாம், அவை தவறாக அறிவிக்கப்பட்ட கூறுகள் என்று கருதி பிழைகளை வீசும்.

இரண்டாவது தீர்வு, கூறு சரியாகச் செயல்படுவதை உறுதிசெய்கிறது. இது தரவைப் பெறுவதற்குப் பொறுப்பான ஒரு சேவையை (`ProjectService`) வரையறுக்கிறது, இது கோணத்தின் சார்பு ஊசி அமைப்பு வழியாக `ProjectListComponent` இல் செலுத்தப்படுகிறது. `ngOnInit` லைஃப்சைக்கிள் ஹூக்கில், திட்டத் தரவை ஒத்திசைவின்றி மீட்டெடுக்க `சந்தா' முறை பயன்படுத்தப்படுகிறது. ஏபிஐகள் போன்ற வெளிப்புற மூலங்களிலிருந்து தரவை ஒருங்கிணைப்பதற்கும் ஒத்திசைவற்ற செயல்பாடுகளைக் கையாளுவதற்கும் இது கோணத்தில் பொதுவான வடிவமாகும். `OnInit` இடைமுகத்தைப் பயன்படுத்துவது, கூறு தொடங்கப்பட்ட உடனேயே தரவு-பெறுதல் தர்க்கம் இயங்குவதை உறுதி செய்கிறது.

இறுதி தீர்வு சோதனையில் கவனம் செலுத்துகிறது. உதிரிபாகங்கள் மற்றும் சேவைகள் எதிர்பார்த்தபடி செயல்படுவதை உறுதி செய்வதற்காக எந்த கோண திட்டத்திலும் அலகு சோதனை ஒரு முக்கிய பகுதியாகும். வழங்கப்பட்ட சோதனை ஸ்கிரிப்ட்டில், சோதனைச் சூழலில் கூறுகளை அமைக்க `TestBed` பயன்பாடு பயன்படுத்தப்படுகிறது. ஒவ்வொரு சோதனைக்கும் முன் `ஒவ்வொருவருக்கும் முன்` செயல்பாடு கூறுகளைத் துவக்குகிறது, அதே நேரத்தில் `காம்பொனென்ட் ஃபிக்ஸ்ச்சர்` சோதனையின் போது கூறுகளுடன் நேரடியாக தொடர்பு கொள்ள அனுமதிக்கிறது. இந்தச் சோதனைக் கட்டமைப்பானது, கூறு உண்மையான சூழலில் செயல்படுவது மட்டுமல்லாமல், சோதனைச் சூழலில் பல்வேறு நிலைமைகளின் கீழ் எதிர்பார்த்தபடி செயல்படுவதையும் உறுதி செய்கிறது. கோண மேம்பாட்டில் சிறந்த நடைமுறைகளை செயல்படுத்தும்போது இந்த ஸ்கிரிப்டுகள் கூட்டாக சிக்கலை தீர்க்கின்றன.

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 பல வழிமுறைகளை வழங்குகிறது உள்ளீடு மற்றும் வெளியீடு பண்புகள், சேவைகள் மற்றும் EventEmitter. இவற்றைப் பயன்படுத்தி, ஒரு குழந்தைக் கூறு அதன் பெற்றோருக்குத் தரவைத் திருப்பி அனுப்பலாம் அல்லது பெற்றோர் அதன் குழந்தைக் கூறுகளுக்குத் தரவை அனுப்பலாம். பல கூறுகளில் மாறும் தரவு புதுப்பிப்புகளைக் கையாளும் போது இதைப் புரிந்துகொள்வது முக்கியமானது.

கோணல் தான் சேவைகள் கூறுகளின் படிநிலையில் நேரடியாக தொடர்பில்லாத கூறுகளுக்கு இடையே தகவல்தொடர்புகளை செயல்படுத்துவதில் முக்கிய பங்கு வகிக்கிறது. ஒரு சேவையை உருவாக்கி அதை தேவையான கூறுகளில் செலுத்துவதன் மூலம், நீங்கள் தரவு மற்றும் நிலைகளை திறம்பட பகிர்ந்து கொள்ளலாம். இந்த முறை பகிரப்பட்ட சேவையாக அறியப்படுகிறது. உங்கள் கூறுகள் துண்டிக்கப்படுவதை உறுதிசெய்கிறது, அவற்றைத் தொடர்புகொள்வதற்கும், உங்கள் கோணப் பயன்பாடுகளில் சிறந்த அமைப்பை மேம்படுத்துவதற்கும் பராமரிப்பதற்கும் உதவுகிறது.

மற்றொரு முக்கியமான தலைப்பு பயன்பாடு ஆகும் கவனிக்கக்கூடியவை கோணத்தில் 2. RxJS இன் பகுதியாக இருக்கும் அவதானிப்புகள், HTTP கோரிக்கைகள் அல்லது பயனர் உள்ளீட்டு நிகழ்வுகள் போன்ற ஒத்திசைவற்ற தரவு ஸ்ட்ரீம்களைக் கையாள உங்களை அனுமதிக்கின்றன. API களில் இருந்து தரவைப் பெறுவதற்கும், தரவு மாறும்போது பார்வையைப் புதுப்பிப்பதற்கும் கோணப் பயன்பாடுகளில் அவை பெரிதும் பயன்படுத்தப்படுகின்றன. கவனிக்கக்கூடியவற்றை சரியாக நிர்வகித்தல் மற்றும் `வரைபடம்`, `வடிகட்டி` மற்றும் `சந்தா' போன்ற ஆபரேட்டர்களை எவ்வாறு பயன்படுத்துவது என்பதைப் புரிந்துகொள்வது உங்கள் கோணக் கூறுகளை மிகவும் திறமையாகவும், பயனர் செயல்களுக்குப் பதிலளிக்கக்கூடியதாகவும் மாற்றுவதற்கு முக்கியமாகும்.