রাউটারমডিউল.ফরট (রুটস) বনাম রাউটারমোডুল.ফোরচিল্ড (রুটস)


111

এই দুটিয়ের মধ্যে পার্থক্য কী এবং প্রত্যেকের ব্যবহারের ক্ষেত্রে কী কী?

ডক্স ঠিক সহায়ক নয়:

ফর রুট এমন একটি মডিউল তৈরি করে যা এতে সমস্ত নির্দেশাবলী, প্রদত্ত রুট এবং রাউটার পরিষেবা নিজেই থাকে।

ফরচিল্ড একটি মডিউল তৈরি করে যা সমস্ত নির্দেশ এবং প্রদত্ত রুটগুলিকে ধারণ করে তবে রাউটার পরিষেবাটি অন্তর্ভুক্ত করে না।

আমার অস্পষ্ট ধারণাটি হ'ল একটি 'মূল' মডিউলটির জন্য এবং অন্যটি কোনও আমদানি করা মডিউলগুলির জন্য (যেহেতু তাদের কাছে ইতিমধ্যে মূল মডিউল থেকে পরিষেবাটি উপলব্ধ ছিল) তবে আমি সত্যিই কোনও ব্যবহারের ক্ষেত্রে ভাবতে পারি না।


1
আপনি যা বোঝেন না সে সম্পর্কে আপনি আরও নির্দিষ্ট হতে পারেন? আপনি যে উদ্ধৃতিটি অন্তর্ভুক্ত করেছেন তা আপনাকে আক্ষরিকভাবে জানায় পার্থক্যটি কী।
jonrsharpe

2
.Child () ব্যবহারের বিন্দুটি কী তা আমি বুঝতে পারি না। আমি পরিষেবা ছাড়াই কখন নির্দেশনা এবং রুট চাইব? এর মধ্যে, দয়া করে পোস্ট থেকে আপনি মুছে ফেলা প্রশ্নের উত্তর দিন ...
VSO

18
RouterServiceএকটি একক Angular2 অ্যাপ্লিকেশনের জন্য কেবল একটি থাকা উচিত । forRootযে সেবা আরম্ভ এবং দ্বি তা একসঙ্গে রেজিস্টার কিছু রুট কনফিগ সঙ্গে পড়বে, forChildশুধুমাত্র অতিরিক্ত রুট configs নিবন্ধন ও Angular2 বলতে পুনরায় ব্যবহার করার জন্য হবে RouterServiceযে forRootতৈরি করেছে।
হ্যারি নিনহ

@ হারিরিহিনহ: ধন্যবাদ - এটাই আমি খুঁজছিলাম। যদিও আপনি প্রাথমিক নিবন্ধের বাইরে অতিরিক্ত রুটগুলি নিবন্ধিত করতে চান? একদম নির্বোধ বলে মনে হচ্ছে। আমি অনুমান করছি গতিময়ভাবে রুট তৈরির কোনও উপায় নেই।
ভিএসও

1
দেখতে এই কৌণিক রাউটার লেখক ভিক্টর দ্বারা।
নিখিল মেহতা

উত্তর:


123

আমি দৃ article়ভাবে এই নিবন্ধটি পড়ার পরামর্শ দিচ্ছি:

সরবরাহকারীদের সাথে মডিউল

আপনি যখন কোনও মডিউল আমদানি করেন আপনি সাধারণত মডিউল শ্রেণীর রেফারেন্স ব্যবহার করেন:

@NgModule({
    providers: [AService]
})
export class A {}

-----------------------------------

@NgModule({
    imports: [A]
})
export class B

এইভাবে মডিউলটিতে নিবন্ধিত সমস্ত সরবরাহকারীকে Aরুট ইনজেক্টর যুক্ত করা হবে এবং পুরো অ্যাপ্লিকেশনের জন্য উপলব্ধ।

তবে এর মতো সরবরাহকারীদের সাথে মডিউলটি নিবন্ধ করার আরও একটি উপায় রয়েছে:

@NgModule({
    providers: [AService]
})
class A {}

export const moduleWithProviders = {
    ngModule: A,
    providers: [AService]
};

----------------------

@NgModule({
    imports: [moduleWithProviders]
})
export class B

এটি পূর্ববর্তীটির মতোই একই প্রভাব ফেলতে পারে।

আপনি সম্ভবত জানেন যে অলস বোঝা মডিউলগুলির নিজস্ব ইনজেক্টর রয়েছে। সুতরাং ধরুন আপনি AServiceপুরো অ্যাপ্লিকেশনটির জন্য নিবন্ধিত করতে চান তবে কিছু BServiceকেবল অলস লোডযুক্ত মডিউলগুলির জন্য উপলব্ধ হতে পারে। আপনি আপনার মডিউলটিকে এভাবে রিফ্যাক্টর করতে পারেন:

@NgModule({
    providers: [AService]
})
class A {}

export const moduleWithProvidersForRoot = {
    ngModule: A,
    providers: [AService]
};

export const moduleWithProvidersForChild = {
    ngModule: A,
    providers: [BService]
};

------------------------------------------

@NgModule({
    imports: [moduleWithProvidersForRoot]
})
export class B

// lazy loaded module    
@NgModule({
    imports: [moduleWithProvidersForChild]
})
export class C

এখন BServiceকেবলমাত্র শিশু অলস বোঝাই মডিউলগুলির AServiceজন্য উপলব্ধ এবং সম্পূর্ণ অ্যাপ্লিকেশনের জন্য উপলব্ধ।

আপনি উপরেরগুলিকে এর মতো রফতানি করা মডিউল হিসাবে আবারও লিখতে পারেন:

@NgModule({
    providers: [AService]
})
class A {
    forRoot() {
        return {
            ngModule: A,
            providers: [AService]
        }
    }

    forChild() {
        return {
            ngModule: A,
            providers: [BService]
        }
    }
}

--------------------------------------

@NgModule({
    imports: [A.forRoot()]
})
export class B

// lazy loaded module
@NgModule({
    imports: [A.forChild()]
})
export class C

রাউটারমডুলের সাথে এটি কীভাবে প্রাসঙ্গিক?

মনে করুন যে তারা উভয়ই একই টোকেন ব্যবহার করে প্রবেশ করেছে:

export const moduleWithProvidersForRoot = {
    ngModule: A,
    providers: [{provide: token, useClass: AService}]
};

export const moduleWithProvidersForChild = {
    ngModule: A,
    providers: [{provide: token, useClass: BService}]
};

আপনি যখন tokenঅলস লোডযুক্ত মডিউল থেকে অনুরোধ করবেন তখন আলাদা কনফিগারেশন সহ আপনি BServiceযেমন পরিকল্পনা মতো ঠিক তেমন পাবেন ।

রাউটারমডিউল মডিউলটির সাথে সম্পর্কিত ROUTESসমস্ত রুটগুলি পেতে টোকেন ব্যবহার করে । যেহেতু এটি অলস লোডযুক্ত মডিউল সম্পর্কিত নির্দিষ্ট রুটগুলি এই মডিউলের অভ্যন্তরে উপলব্ধ থাকতে চায় (আমাদের বিএসসিভারের অ্যানালগগুলি) এটি অলস লোড হওয়া শিশু মডিউলগুলির জন্য বিভিন্ন কনফিগারেশন ব্যবহার করে:

static forChild(routes: Routes): ModuleWithProviders {
    return {
        ngModule: RouterModule, 
        providers: [{provide: ROUTES, multi: true, useValue: routes}]
    };
}

3
সুতরাং অন্য কথায়, আমাদের ফিচার মডিউলগুলিতে শিশু () জন্য কল করা উচিত কারণ ফর্ম রুট () ইতিমধ্যে রুট মডিউলটিতে ডাকা হয়েছিল এবং সমস্ত প্রয়োজনীয় পরিষেবা যুক্ত করা হয়েছিল। সুতরাং আবার রুট () এর জন্য কল করা অনাকাঙ্ক্ষিত রাজ্যে নিয়ে যাবে?
ওয়াচবার্ন

7
@ ওয়াচবার্ন, কল করছে forRoot একটি অলস লোডযুক্ত মডিউলটিতে করা অলস লোডযুক্ত মডিউল সমস্ত বৈশ্বিক পরিষেবার নতুন উদাহরণ তৈরি করবে। হ্যাঁ, এটি অনাকাঙ্ক্ষিত ফলাফলের দিকে নিয়ে যাবে। এই নিবন্ধটিও পড়ুন
কৌণিকের

1
@ উইলিউশার্প, কেন?
ম্যাক্স কোরেটস্কি

1
আমি পুরোপুরি এটি বুঝতে পারি। তবে রাউটারমডিউল.ফোর রুট, ভিএস রাউটারমডিউল.ফোর চিলেসের মধ্যে পার্থক্য কী? ফর রুট এবং ফরচিল্ড কেবল স্থির পদ্ধতি যা উত্তীর্ণ হওয়া মানের উপর ভিত্তি করে অবজেক্ট দেয়। সুতরাং অ্যাপ্লিকেশন মডিউলে, আমি কেন শিশুদের জন্য ব্যবহার করতে পারছি না ?? কেন তার নিক্ষেপ ত্রুটি? কেন আমি একাধিক ফর রুট ব্যবহার করতে পারি না?
সুবদীপ

2
কখনও কখনও উত্তরগুলি দিয়ে সরাসরি পয়েন্টে যাওয়া ভাল। তথ্য ওভারলোড বেশিরভাগ সময় আরও বিভ্রান্তির দিকে নিয়ে যায়।
অ্যাডাপাজি ওলোয়াভাসুন

33

আমি উত্তরগুলি সঠিক বলে মনে করি তবে আমার মনে হয় কিছু অনুপস্থিত।
যে জিনিসটি অনুপস্থিত তা হ'ল "কেন এবং কী সমাধান করে?"।
ঠিক আছে চল শুরু করি.

প্রথমে কিছু তথ্য উল্লেখ করা যাক:

সমস্ত মডিউলগুলির রুট পরিষেবাদিতে অ্যাক্সেস রয়েছে।
এমনকি অলস লোডযুক্ত মডিউলগুলি এমন পরিষেবা ব্যবহার করতে পারে যা সরবরাহ করা হয়েছিল app.module
যদি অলস বোঝাই মডিউলটি নিজের কাছে এমন পরিষেবা সরবরাহ করে যা অ্যাপ মডিউলটি ইতিমধ্যে সরবরাহ করেছে? সেখানে থাকবে 2 দৃষ্টান্ত।
এটি কোনও সমস্যা নয় তবে কখনও কখনও এটি হয়
আমরা কীভাবে এটি সমাধান করতে পারি? অলস লোডযুক্ত মডিউলগুলিতে কেবল সেই সরবরাহকারীর সাথে কোনও মডিউল আমদানি করবেন না।

গল্পের শেষে.

এটি কেবলমাত্র এটি দেখানোর জন্য ছিল যে অলস লোডযুক্ত মডিউলগুলির নিজস্ব ইনজেকশন পয়েন্ট রয়েছে (অলস-লোডযুক্ত মডিউলগুলির বিপরীতে)।

কিন্তু যখন কোনও ভাগ করা (!) মডিউলটি ঘোষণা করে providersএবং সেই মডিউলটি অলস এবং দ্বারা আমদানি করা হয় তখন কী ঘটে app.module? আবার, যেমনটি আমরা বলেছিলাম, দুটি উদাহরণ।

সুতরাং আমরা কীভাবে ভাগ করা মডিউল POV এ এটি সমাধান করতে পারি? আমাদের ব্যবহার না করার উপায় দরকার providers:[]! কেন? কারণ সেগুলি গ্রাসকারী অলস এবং অ্যাপ্লিকেশন উভয়টিতেই স্বয়ংক্রিয়ভাবে আমদানি করা হবে and

ঠিক আছে, দেখা যাচ্ছে যে আমরা এমন একটি ভাগ করা মডিউল ঘোষণা করতে পারি যা নেই providers:[], তবে এখনও সরবরাহকারী সরবরাহ করবে (দুঃখিত :))

কিভাবে? এটার মত :

এখানে চিত্র বর্ণনা লিখুন

লক্ষ্য করুন, কোনও সরবরাহকারী নেই।

কিন্তু

  • এখন কী হবে যখন অ্যাপ.মডিউল পরিষেবাটির পিওভির সাথে ভাগ করা মডিউলটি আমদানি করবে? কিছুই।

  • এখন কি হবে যখন অলস মডিউল পরিষেবাটির পিওভির সাথে ভাগ করা মডিউলটি আমদানি করবে? কিছুই।

সম্মেলনের মাধ্যমে ম্যানুয়াল প্রক্রিয়া প্রবেশ করানো:

আপনি লক্ষ্য করবেন আছে ছবির মধ্যে প্রদানকারীর service1এবংservice2

এটি আমাদের service2অলস লোডযুক্ত মডিউল এবং অলস মডিউলগুলির জন্য আমদানি করতে সহায়তা করে service1। ( কাশি ... রাউটার .... কাশি )

বিটিডাব্লু, কেউ আপনাকে forRootঅলস মডিউলে কল করতে বাধা দিচ্ছে না । তবে আপনার কাছে 2 টি উদাহরণ থাকবে কারণ app.moduleএটিও করা উচিত - সুতরাং অলস মডিউলগুলিতে এটি করবেন না

এছাড়াও - যদি app.moduleকল forRoot(এবং কেউ কল করেন না forchild) - এটি দুর্দান্ত, তবে রুট ইনজেক্টরটি কেবল থাকবে service1। (সমস্ত অ্যাপের জন্য উপলব্ধ)

তাহলে আমাদের কেন এটি দরকার? আমি বলতে চাই :

এটি একটি ভাগ করা মডিউলটিকে, তার বিভিন্ন সরবরাহকারীকে আগ্রহী মডিউল এবং অলস মডিউলগুলির মাধ্যমে এবং কনভেনশনের মাধ্যমে বিভক্ত করতে সক্ষম করে । আমি পুনরাবৃত্তি: সম্মেলনforRootforChild

এটাই.

অপেক্ষা করুন !! সিঙ্গেলটন সম্পর্কে একটি শব্দ না ?? তাহলে আমি কেন সব জায়গায় সিঙ্গলটন পড়ি?

ভাল - এটি উপরের বাক্যে লুকিয়ে আছে ^

এটি একটি ভাগ করা মডিউলটিকে তার বিভিন্ন সরবরাহকারীকে উত্সাহিত মডিউল এবং অলস মডিউলগুলি - ফররুট এবং ফোরচিল্ডের মাধ্যমে বিভক্ত করতে সক্ষম করে ।

কনভেনশন বা আরও ভালো হবে - - আপনি কনভেনশন অনুসরণ করবে না - আপনি পাবেন (!!!) এটি Singleton হতে পারবেন না একটি Singleton পেতে।
সুতরাং আপনি যদি কেবলমাত্র লোড forRootকরেন app.module তবে আপনি কেবল একটি উদাহরণ পাবেন কারণ আপনার কেবলমাত্র forRootএটিতে কল করা উচিত app.module
বিটিডাব্লু - এই মুহুর্তে আপনি ভুলে যেতে পারেন forChild। অলস বোঝা মডিউলটি কল করবে না / কল করবে না forRoot- সুতরাং আপনি সিঙ্গলটনের পিওভিতে নিরাপদ।

ফরআরট এবং ফরচিল্ড একটি অবিচ্ছেদ্য প্যাকেজ নয় - এটি কেবলমাত্র যে রুটকে কল করার কোনও মানে নেই যা স্পষ্টতই কেবল app.module অলস মডিউলগুলির সক্ষমতা না দিয়েই লোড করা হবে , নতুন পরিষেবা তৈরি না করে নিজস্ব পরিষেবা থাকবে-যা-হওয়া উচিত -singleton।

এই কনভেনশনটি আপনাকে একটি দুর্দান্ত ক্ষমতা বলে forChild- যা "কেবলমাত্র অলস লোডযুক্ত মডিউলগুলির জন্য পরিষেবাগুলি" গ্রাহ্য করতে।

এখানে একটি ডেমো রুট সরবরাহকারী ইতিবাচক সংখ্যা দেয়, অলস লোডযুক্ত মডিউলগুলি নেতিবাচক সংখ্যা দেয়।


1. এখানে পিওভি কি? ২. স্ট্যাকব্লিটজ আর কাজ করে না।
নিকোলাস কে

@ নিকোলাসকে এই স্ট্যাকব্লিটজ সবসময় কিছু সময়ের পরে ঝামেলা জাগিয়ে তুলবে। আমি নতুন সংস্করণ আপলোড করার চেষ্টা করব
রই নমির

26

ডকুমেন্টেশন পরিষ্কারভাবে এখানে জানায় যে এখানে এই পার্থক্যের উদ্দেশ্য কী: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#core- for- root

শুধুমাত্র রুট অ্যাপ্লিকেশন মডিউল, অ্যাপমোডিয়ালেই রুট কল করুন। এটিকে অন্য যে কোনও মডিউলে, বিশেষত একটি অলস বোঝা মডিউলটিতে কল করা অভিপ্রায়টির বিপরীত এবং রানটাইম ত্রুটি হওয়ার সম্ভাবনা রয়েছে।

ফলাফলটি আমদানি করতে মনে রাখবেন; এটি অন্য কোনও @ এনজিএমডিউল তালিকায় যুক্ত করবেন না।

প্রতিটি অ্যাপ্লিকেশনটির ঠিক একটি প্রারম্ভিক বিন্দু (মূল) থাকে যেখানে প্রধান রাউটিং পরিষেবাটি শুরু করা উচিত forRoot, যখন নির্দিষ্ট "শিশু" বৈশিষ্ট্যগুলির জন্য রুটগুলি সাথে অতিরিক্তে নিবন্ধিত হওয়া উচিত forChild। এটি সাবমোডিয়াল এবং অলস লোডযুক্ত মডিউলগুলির জন্য অত্যন্ত দরকারী যেগুলি অ্যাপ্লিকেশন শুরু করার সময় লোড করতে হবে না, এবং @ হ্যারি নিন বলেছেন যে তাদেরকে নতুন পরিষেবার নিবন্ধকরণের পরিবর্তে রাউটার সার্ভিস পুনরায় ব্যবহার করতে বলা হয়েছে, যা রানটাইম ত্রুটির কারণ হতে পারে।


2
এই দস্তাবেজগুলি সরানো হয়েছে বলে মনে হচ্ছে, v2.angular.io/docs/ts/latest/guide/…
পিটারস

1

যদি অ্যাপরেটস সাইটে সাইটের বিভিন্ন ক্রিয়াকলাপের (অ্যাডমিন ক্রুড, ব্যবহারকারী ক্রুড, বই ক্রুড) থাকে এবং আমরা সেগুলি আলাদা করতে চাই আমরা কেবল এটি করতে পারি:

 imports: [
    BrowserModule, HttpModule,
    AppRoutingModule,
    RouterModule.forRoot(categoriesRoutes),
    RouterModule.forRoot(auteursRoutes),
  ],

এবং রুটের জন্য:

const auteursRoutes:Routes=[
  {path:'auteurs/ajouter',component:CreerAuteurComponent},
]
const categoriesRoutes: Routes = [


  {path:'categories/consulter',component:ConsultercategoriesComponent},
  {path:'categories/getsouscategoriesbyid/:id',component:GetsouscategoriesbyIDComponent},
  {path:'categories/ajout',component:CreerCategorieComponent},
 {path:'categories/:id',component:ModifiercategorieComponent},
 {path:'souscategories/ajout/:id',component:AjoutersouscategorieComponent},
 {path:'souscategories/lecture/:id1',component:SouscategoriesComponent},
 {path:'souscategories/modifier/:id1',component:ModifiersupprimersouscategorieComponent},
  {path:'uploadfile',component:UploadfileComponent},
  {path:'categories',component:ConsultercategoriesComponent},



]
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.