Angular 2 অন্য মডিউল থেকে উপাদান ব্যবহার করুন




typescript angular-module (5)

(কৌণিক 2 - কৌণিক 6)

উপাদান শুধুমাত্র একটি একক মডিউল ঘোষণা করা যেতে পারে। অন্য মডিউল থেকে একটি উপাদান ব্যবহার করার জন্য আপনাকে দুটি সহজ কাজ করতে হবে:

  1. প্রথম মডিউল মধ্যে উপাদান রপ্তানি করুন
  2. দ্বিতীয় মডিউলে, প্রথম মডিউল আমদানি করুন

1 ম মডিউল:

একটি উপাদান আছে (এটি কল করুন: "গুরুত্বপূর্ণ সম্মেলন"), আমরা দ্বিতীয় মডিউল এর পৃষ্ঠাতে পুনরায় ব্যবহার করতে চান।

@NgModule({
declarations: [
    FirstPage,
    ImportantCopmonent // <-- Enable using the component html tag in current module
],
imports: [
  IonicPageModule.forChild(NotImportantPage),
  TranslateModule.forChild(),
],
exports: [
    FirstPage,
    ImportantCopmonent // <--- Enable using the component in other modules
  ]
})
export class FirstPageModule { }

দ্বিতীয় মডিউল:

FirstPageModule আমদানি করে "গুরুত্বপূর্ণ সম্মেলন" পুনঃব্যবহার করে

@NgModule({
declarations: [
    SecondPage,
    Example2ndComponent,
    Example3rdComponent
],
imports: [
  IonicPageModule.forChild(SecondPage),
  TranslateModule.forChild(),
  FirstPageModule // <--- this Imports the source module, with its exports
], 
exports: [
    SecondPage,
]
})
export class SecondPageModule { }

আমি Angular 2 (সংস্করণ 2.0.0 - চূড়ান্ত) অ্যাপ্লিকেশন angular-cli সঙ্গে উত্পন্ন আছে।

যখন আমি একটি উপাদান তৈরি করি এবং এটি AppModule এর ঘোষনা অ্যারে যোগ করি এটি সব ভাল, এটি কাজ করে।

আমি উপাদান পৃথক করার সিদ্ধান্ত নিয়েছে, তাই আমি একটি TaskModule এবং একটি উপাদান TaskCard । এখন আমি AppModule ( Board উপাদান) এর উপাদানগুলির মধ্যে একটিতে TaskCard ব্যবহার করতে চাই।

AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { BoardComponent } from './board/board.component';
import { LoginComponent } from './login/login.component';

import { MdButtonModule } from '@angular2-material/button';
import { MdInputModule } from '@angular2-material/input';
import { MdToolbarModule } from '@angular2-material/toolbar';

import { routing, appRoutingProviders} from './app.routing';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { UserService  } from './services/user/user.service';
import { TaskModule } from './task/task.module';


@NgModule({
  declarations: [
    AppComponent,
    BoardComponent,// I want to use TaskCard in this component
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdButtonModule,
    MdInputModule,
    MdToolbarModule,
    routing,
    TaskModule // TaskCard is in this module
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

TaskModule:

import { NgModule } from '@angular/core';
import { TaskCardComponent } from './task-card/task-card.component';

import { MdCardModule } from '@angular2-material/card';

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  providers: []
})
export class TaskModule{}

পুরো প্রকল্পটি https://github.com/evgdim/angular2 (কানবান-বোর্ড ফোল্ডারে) পাওয়া যায়

আমি কি অনুপস্থিত? TaskCardComponent BoardComponent TaskCardComponent ব্যবহার করার জন্য আমাকে কি করতে হবে?


আপনাকে এটি আপনার NgModule থেকে export হবে:

@NgModule({
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule],
  providers: []
})
export class TaskModule{}

একটি বড় এবং দুর্দান্ত পদ্ধতিটি একটি NgModuleFactory থেকে মডিউল লোড করা হয়, আপনি এটি কল করে অন্য মডিউলের ভিতরে একটি মডিউল লোড করতে পারেন:

constructor(private loader: NgModuleFactoryLoader, private injector: Injector) {}

loadModule(path: string) {
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
        const entryComponent = (<any>moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);
        const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
        this.lazyOutlet.createComponent(compFactory);
    });
}

আমি here থেকে পেয়েছিলাম।


এখানে প্রধান নিয়ম হল যে:

একটি উপাদান টেমপ্লেট সংকলনের সময় প্রযোজ্য নির্বাচক মডিউল দ্বারা নির্ধারিত হয় যে উপাদান ঘোষণা, এবং যে মডিউল এর আমদানি রপ্তানি সংক্রামক বন্ধ।

সুতরাং, এটি রপ্তানি করার চেষ্টা করুন:

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] <== this line
})
export class TaskModule{}

আমি কি রপ্তানি করা উচিত?

অন্যান্য মডিউল উপাদান যে তাদের টেম্পলেট রেফারেন্স করতে সক্ষম হওয়া উচিত ঘোষণা ঘোষণাযোগ্য ক্লাস। এই আপনার পাবলিক ক্লাস হয়। আপনি যদি কোনও শ্রেণির রপ্তানি না করেন তবে এটি ব্যক্তিগত মডিউলে থাকে, শুধুমাত্র এই মডিউলে ঘোষিত অন্যান্য উপাদানগুলিতে দৃশ্যমান।

যে মুহূর্তে আপনি একটি নতুন মডিউল তৈরি করেন, অলস বা না, কোনও নতুন মডিউল এবং আপনি এটির মধ্যে কিছু ঘোষণা করেন, সেই নতুন মডিউলটিতে একটি পরিচ্ছন্ন অবস্থা রয়েছে (যেমন ওয়ার্ড বেল https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2 বলেছিলেন) https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2 )

কৌণিক @NgModule গুলি প্রতিটি জন্য ট্রানজিট মডিউল সৃষ্টি করে।

এই মডিউল নির্দেশিকাগুলি সংগ্রহ করে যা অন্য কোনও মডিউল থেকে আমদানি করা হয় (যদি আমদানিকৃত মডিউলের ট্রানজিট মডিউল নির্দেশাবলীর রপ্তানি করে থাকে) বা বর্তমান মডিউলে ঘোষণা করা হয়

যখন মডিউল X সাথে কৌণিক কম্পাইল করা হয় তখন এটি X.transitiveModule.directives এ সংগৃহীত নির্দেশগুলি ব্যবহার করা হয়

compiledTemplate = new CompiledTemplate(
    false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives);

https://github.com/angular/angular/blob/4.2.x/packages/compiler/src/jit/compiler.ts#L250-L251

উপরে ছবি অনুযায়ী এই উপায়

  • YComponent তার টেমপ্লেটে ZComponent ব্যবহার করতে পারে না কারণ Transitive module Y এর directives অ্যারে ZComponent ধারণ করে না কারণ YModule আমদানি ZModule যার ট্রান্সটিভ মডিউল exportedDirectives অ্যারেতে ZComponent থাকে।

  • XComponent টেম্পলেটের মধ্যে আমরা ZComponent ব্যবহার করতে ZComponent কারণ ZComponent Transitive module X এর নির্দেশক অ্যারে রয়েছে যার মধ্যে ZComponent রয়েছে কারণ XModule আমদানি মডিউল ( YModule ) যা মডিউল ( ZModule ) রপ্তানি করে যা নির্দেশক ZComponent রপ্তানি করে

  • AppComponent টেম্পলেটের মধ্যে আমরা AppComponent ব্যবহার করতে পারি না কারণ AppModule আমদানি XModule তবে XModule রপ্তানি করে না।

আরো দেখুন


অন্যান্য মডিউলে একটি মডিউলে ডিসক্লারে থাকা উপাদানটি কীভাবে ব্যবহার করবেন তা সমাধান করুন।

রয়ি নামির ব্যাখ্যা উপর ভিত্তি করে (আপনাকে অনেক ধন্যবাদ)। অলস লোডিং ব্যবহৃত হয় যখন অন্য কোন মডিউলে একটি মডিউল ঘোষণা একটি উপাদান পুনরায় ব্যবহার করার জন্য একটি অনুপস্থিত অংশ আছে।

1 ম মডিউলে উপাদানটি রপ্তানি করুন যা এতে রয়েছে:

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] <== this line
})
export class TaskModule{}

২ য় মডিউলে যেখানে আপনি টাস্ককার্ড কম্পোনেন্ট ব্যবহার করতে চান:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdCardModule } from '@angular2-material/card';

@NgModule({
  imports: [
   CommonModule,
   MdCardModule
   ],
  providers: [],
  exports:[ MdCardModule ] <== this line
})
export class TaskModule{}

এটির মতো দ্বিতীয় মডিউলটি প্রথম মডিউল আমদানি করে যা উপাদানটি আমদানি করে এবং রপ্তানি করে।

যখন আমরা দ্বিতীয় মডিউলে মডিউল আমদানি করি তখন আমাদের আবার এটি রপ্তানি করতে হবে। এখন আমরা দ্বিতীয় মডিউল প্রথম উপাদান ব্যবহার করতে পারেন।





angular-module