প্রথমত, আপনাকে উপাদানগুলির মধ্যে সম্পর্কগুলি বোঝার দরকার। তারপরে আপনি যোগাযোগের সঠিক পদ্ধতিটি চয়ন করতে পারেন। উপাদানগুলির মধ্যে যোগাযোগের জন্য আমার অনুশীলনে আমি যে সমস্ত পদ্ধতি জানি এবং ব্যবহার করি সেগুলি ব্যাখ্যা করার চেষ্টা করব।
উপাদানগুলির মধ্যে কি ধরণের সম্পর্ক থাকতে পারে?
1. পিতা বা মাতা> শিশু
ইনপুট মাধ্যমে ডেটা ভাগ করে নেওয়া
এটি সম্ভবত ডেটা ভাগ করার সবচেয়ে সাধারণ পদ্ধতি। এটি @Input()টেমপ্লেটের মাধ্যমে ডেটা প্রেরণ করার জন্য ডেকরেটার ব্যবহার করে কাজ করে ।
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
<child-component [childProperty]="parentProperty"></child-component>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent{
parentProperty = "I come from parent"
constructor() { }
}
child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'child-component',
template: `
Hi {{ childProperty }}
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
@Input() childProperty: string;
constructor() { }
}
এটি একটি খুব সাধারণ পদ্ধতি। এটা ব্যবহার করা সহজ। আমরা এনজিওনচেনজ ব্যবহার করে শিশু উপাদানগুলির ডেটাগুলিতে পরিবর্তনগুলিও ধরতে পারি ।
তবে ভুলে যাবেন না যে আমরা যদি কোনও বস্তুকে ডেটা হিসাবে ব্যবহার করি এবং এই বস্তুর পরামিতিগুলি পরিবর্তন করি তবে এর উল্লেখটি পরিবর্তন হবে না। অতএব, আমরা যদি কোনও সন্তানের উপাদানগুলিতে কোনও পরিবর্তিত অবজেক্ট পেতে চাই, তবে তা অবশ্যই পরিবর্তনযোগ্য।
2. শিশু> পিতামাতার
ভিউচিল্ডের মাধ্যমে ডেটা ভাগ করা
ভিউচিল্ড তার বৈশিষ্ট্য এবং ফাংশনগুলিতে পিতামাতাকে অ্যাক্সেস দিয়ে একটি উপাদানকে অন্যটিতে ইনজেকশনের অনুমতি দেয়। তবে একটি সাবধানবাণী হ'ল childভিউটি আরম্ভ করা না হওয়া পর্যন্ত এটি উপলব্ধ হবে না। এর অর্থ শিশুর কাছ থেকে ডেটা পাওয়ার জন্য আমাদের আফ্রিকাভিউইনিট লাইফসাইক্ল হুক বাস্তবায়ন করতে হবে।
parent.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";
@Component({
selector: 'parent-component',
template: `
Message: {{ message }}
<child-compnent></child-compnent>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {
@ViewChild(ChildComponent) child;
constructor() { }
message:string;
ngAfterViewInit() {
this.message = this.child.message
}
}
child.component.ts
import { Component} from '@angular/core';
@Component({
selector: 'child-component',
template: `
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message = 'Hello!';
constructor() { }
}
আউটপুট () এবং ইভেন্টইমিটারের মাধ্যমে ডেটা ভাগ করা
ডেটা ভাগ করার আরেকটি উপায় হ'ল সন্তানের কাছ থেকে ডেটা নির্গত করা, যা পিতামাতার দ্বারা তালিকাভুক্ত করা যেতে পারে। আপনি যখন বোতাম ক্লিকগুলি, ফর্ম এন্ট্রি এবং অন্যান্য ব্যবহারকারীর ইভেন্টের মতো ঘটে থাকে এমন ডেটা পরিবর্তনগুলি ভাগ করতে চান যখন এই পদ্ধতির আদর্শ।
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
Message: {{message}}
<child-component (messageEvent)="receiveMessage($event)"></child-component>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message:string;
receiveMessage($event) {
this.message = $event
}
}
child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-component',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child.component.css']
})
export class ChildComponent {
message: string = "Hello!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}
৩. ভাইবোন
শিশু> পিতামাতা> শিশু
আমি নীচে ভাইবোনদের মধ্যে যোগাযোগের অন্যান্য উপায়গুলি ব্যাখ্যা করার চেষ্টা করি। তবে উপরের পদ্ধতিগুলি বোঝার একটি উপায় আপনি ইতিমধ্যে বুঝতে পেরেছিলেন।
parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'parent-component',
template: `
Message: {{message}}
<child-one-component (messageEvent)="receiveMessage($event)"></child1-component>
<child-two-component [childMessage]="message"></child2-component>
`,
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor() { }
message: string;
receiveMessage($event) {
this.message = $event
}
}
সন্তানের one.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'child-one-component',
template: `
<button (click)="sendMessage()">Send Message</button>
`,
styleUrls: ['./child-one.component.css']
})
export class ChildOneComponent {
message: string = "Hello!"
@Output() messageEvent = new EventEmitter<string>();
constructor() { }
sendMessage() {
this.messageEvent.emit(this.message)
}
}
সন্তানের two.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'child-two-component',
template: `
{{ message }}
`,
styleUrls: ['./child-two.component.css']
})
export class ChildTwoComponent {
@Input() childMessage: string;
constructor() { }
}
৪. অপ্রাসঙ্গিক উপাদান
নীচে বর্ণিত সমস্ত পদ্ধতিগুলি উপাদানগুলির মধ্যে সম্পর্কের জন্য উপরের সমস্ত বিকল্পের জন্য ব্যবহার করা যেতে পারে। তবে প্রত্যেকের নিজস্ব সুবিধা এবং অসুবিধা রয়েছে।
একটি পরিষেবার সাথে ডেটা ভাগ করা
সরাসরি সংযোগের অভাবের উপাদানগুলির মধ্যে যেমন ভাইবোন, নাতি-নাতনি ইত্যাদির মধ্যে ডেটা পাস করার সময় আপনার ভাগ করা পরিষেবা ব্যবহার করা উচিত। যখন আপনার কাছে এমন ডেটা থাকে যা সর্বদা সিঙ্কে থাকা উচিত, আমি এই পরিস্থিতিতে RxJS আচরণ আচরণটি খুব দরকারী।
data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('default message');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
first.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'first-componennt',
template: `
{{message}}
`,
styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
message:string;
constructor(private data: DataService) {
// The approach in Angular 6 is to declare in constructor
this.data.currentMessage.subscribe(message => this.message = message);
}
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
}
second.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";
@Component({
selector: 'second-component',
template: `
{{message}}
<button (click)="newMessage()">New Message</button>
`,
styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
message:string;
constructor(private data: DataService) { }
ngOnInit() {
this.data.currentMessage.subscribe(message => this.message = message)
}
newMessage() {
this.data.changeMessage("Hello from Second Component")
}
}
একটি রুটের সাথে ডেটা ভাগ করা
কখনও কখনও আপনার কেবল উপাদানগুলির মধ্যে সহজ ডেটা পাস করার প্রয়োজন হয় না তবে পৃষ্ঠার কিছু স্থিতি সংরক্ষণ করতে হবে। উদাহরণস্বরূপ, আমরা অনলাইন বাজারে কিছু ফিল্টার সংরক্ষণ করতে চাই এবং তারপরে এই লিঙ্কটি অনুলিপি করে কোনও বন্ধুর কাছে প্রেরণ করতে চাই। এবং আমরা আশা করি এটি পৃষ্ঠাটি আমাদের মতো একই অবস্থায় খুলবে। এটির প্রথম এবং সম্ভবত দ্রুততম উপায়টি হ'ল ক্যোয়ারী প্যারামিটারগুলি ব্যবহার করা ।
ক্যোয়ারী প্যারামিটারগুলি /people?id=যেখানে idযে কোনও কিছুর সমান করতে পারে এবং আপনার ইচ্ছামতো প্যারামিটার থাকতে পারে তার প্রান্তে আরও বেশি তাকান । ক্যোয়ারী প্যারামিটারগুলি অ্যাম্পারস্যান্ড অক্ষর দ্বারা পৃথক করা হবে।
ক্যোয়ারী প্যারামিটারগুলির সাথে কাজ করার সময় আপনার রুট ফাইলে সেগুলি সংজ্ঞায়িত করার দরকার নেই এবং সেগুলি পরামিতি হিসাবে নামকরণ করা যেতে পারে। উদাহরণস্বরূপ, নিম্নলিখিত কোড নিন:
page1.component.ts
import {Component} from "@angular/core";
import {Router, NavigationExtras} from "@angular/router";
@Component({
selector: "page1",
template: `
<button (click)="onTap()">Navigate to page2</button>
`,
})
export class Page1Component {
public constructor(private router: Router) { }
public onTap() {
let navigationExtras: NavigationExtras = {
queryParams: {
"firstname": "Nic",
"lastname": "Raboy"
}
};
this.router.navigate(["page2"], navigationExtras);
}
}
প্রাপ্তি পৃষ্ঠায়, আপনি নীচের মত এই কোয়েরি পরামিতি পাবেন:
page2.component.ts
import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
@Component({
selector: "page2",
template: `
<span>{{firstname}}</span>
<span>{{lastname}}</span>
`,
})
export class Page2Component {
firstname: string;
lastname: string;
public constructor(private route: ActivatedRoute) {
this.route.queryParams.subscribe(params => {
this.firstname = params["firstname"];
this.lastname = params["lastname"];
});
}
}
NgRx
শেষ উপায়টি , যা আরও জটিল তবে আরও শক্তিশালী, এনজিআরএক্স ব্যবহার করা । এই লাইব্রেরি তথ্য ভাগ করে নেওয়ার জন্য নয়; এটি একটি শক্তিশালী রাষ্ট্র পরিচালনার পাঠাগার। আমি এটি সংক্ষিপ্ত উদাহরণে কীভাবে ব্যবহার করব তা ব্যাখ্যা করতে পারি না, তবে আপনি অফিসিয়াল সাইটে যেতে পারেন এবং এটি সম্পর্কে নথিপত্র পড়তে পারেন।
আমার কাছে, এনজিআরএক্স স্টোর একাধিক সমস্যা সমাধান করে। উদাহরণস্বরূপ, যখন আপনাকে পর্যবেক্ষণযোগ্যদের সাথে ডিল করতে হয় এবং যখন কিছু পর্যবেক্ষণযোগ্য ডেটার জন্য দায়িত্ব বিভিন্ন উপাদানগুলির মধ্যে ভাগ করা হয়, তখন স্টোর ক্রিয়া এবং রিডিউসার নিশ্চিত করে যে ডেটা পরিবর্তনগুলি সর্বদা "সঠিক পথে" সম্পাদিত হবে।
এটি এইচটিটিপি অনুরোধগুলি ক্যাশে করার জন্য একটি নির্ভরযোগ্য সমাধান সরবরাহ করে। আপনি অনুরোধগুলি এবং তাদের প্রতিক্রিয়াগুলি সংরক্ষণ করতে সক্ষম হবেন যাতে আপনি যাচাই করা অনুরোধটির কোনও সঞ্চিত প্রতিক্রিয়া নেই তা যাচাই করতে পারবেন।
আপনি এনজিআরএক্স সম্পর্কে পড়তে পারেন এবং আপনার অ্যাপে এটি প্রয়োজন কিনা তা বুঝতে পারবেন:
অবশেষে, আমি বলতে চাই যে ডেটা ভাগ করে নেওয়ার জন্য কয়েকটি পদ্ধতি বেছে নেওয়ার আগে আপনাকে বুঝতে হবে যে ভবিষ্যতে এই ডেটা কীভাবে ব্যবহৃত হবে। আমি বোঝাতে চাইছি এখনই আপনি @Inputব্যবহারকারীর নাম এবং উপাধি ভাগ করে নেওয়ার জন্য কেবল একটি সজ্জা ব্যবহার করতে পারেন । তারপরে আপনি একটি নতুন উপাদান বা নতুন মডিউল যুক্ত করবেন (উদাহরণস্বরূপ, প্রশাসক প্যানেল) যার ব্যবহারকারীর সম্পর্কে আরও তথ্যের প্রয়োজন। এর অর্থ এটি ব্যবহারকারীর ডেটা বা ডেটা ভাগ করার জন্য অন্য কোনও উপায়ে কোনও পরিষেবা ব্যবহার করার সর্বোত্তম উপায় হতে পারে। আপনি ডেটা ভাগ করে নেওয়া বাস্তবায়ন শুরু করার আগে আপনাকে আরও এ সম্পর্কে চিন্তাভাবনা করা উচিত।