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

Question

আমার অ্যাংুলার ২.০.০ অ্যাপ্লিকেশনটি কৌণিক-ক্লিমে তৈরি হয়েছে।

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

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

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?

Answer 1

এখানে মূল নিয়মটি হ'ল:

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

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

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

আমার কী রফতানি করা উচিত?

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

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

কৌণিক প্রতিটি এর জন্য ট্রানজিটি মডিউল তৈরি করে @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তার টেমপ্লেটে কারণ directivesঅ্যারে Transitive module Yধারণ করে না ZComponentকারণ YModuleআমদানি করা হয়েছে ZModuleযার সকর্মক মডিউল রয়েছে ZComponentএ exportedDirectivesঅ্যারে।

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

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

আরো দেখুন

• অলস লোডযুক্ত মডিউলটি কেন সাধারণমডুল আমদানি করতে হয়? কৌণিক ঘ

• কৌণিক মডিউল FAQs

• এনজিডমুলেলে ঘোষণা, সরবরাহকারী এবং আমদানির মধ্যে পার্থক্য কী

Comments

আমি কীভাবে আমদানি করা মডিউলটির কোনও রুট সংজ্ঞাতে এই "টাস্ককার্ড কম্পোনেন্ট" ব্যবহার করব?

— জ্যাকআফএল সমস্ত

কি দুর্দান্ত উত্তর। আপনি অঙ্কন তৈরি করেছেন? যদি তাই হয়, আমি নির্বাক। প্রত্যেকে তাদের উত্তরে এ জাতীয় প্রচেষ্টা রাখে না। ধন্যবাদ

— রই নমির

@ রয়ি হ্যাঁ, এটি আমার ছবি :) এটি গিথুব.আঙ্গুলার

— angular/

@yuruzi, আমি DOM নোড সরাসরি ছাড়া রেফারেন্স প্রেরণ করতে পারবেন না stackoverflow.com/questions/47246638/... plnkr.co/edit/DnnjFBa3HLzFKNIdE4q5?p=preview

— Karty

@ ইউরজুই ... আমি বুঝতে পারছি না যে ওয়াই কম্পোনেন্ট জেডমডুলকে কীভাবে রফতানি করতে পারে, যেহেতু আমি দেখছি যে পৃথক ফাইল (y.module.ts) হিসাবে এবং এটির অন্য কোনও মডিউল রফতানি করার জন্য এটির কোনও আমদানি নেই (যা z .module.ts) [এটির প্রাথমিক প্রশ্নটি যদি আমাকে বহন করে]

— ওমগনেশ

Answer 2

যা শুরু করেছো exportআপনার থেকে এটা NgModule:

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

Comments

টাস্কমডিউলটি অ্যাপমডুলিতে আমদানি করা অবধি এই কাজগুলি করে। যখন টাস্কমডুল অলস লোড হয় তখন এটি ব্যর্থ হয়।

— অরুণ

Answer 3

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

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

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 { }

---

২ য় মডিউল:

ফার্স্টপেজমডুল আমদানি করে "গুরুত্বপূর্ণ সংস্থাপন" পুনরায় ব্যবহার করুন

@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 { }

Answer 4

নোট করুন যে একটি তথাকথিত "বৈশিষ্ট্য মডিউল" তৈরি করতে আপনার CommonModuleএটির ভিতরে আমদানি করা দরকার । সুতরাং, আপনার মডিউল প্রারম্ভিকরণ কোডটি এর মতো দেখতে পাবেন:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TaskCardComponent } from './task-card/task-card.component';
import { MdCardModule } from '@angular2-material/card';

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

এখানে আরও তথ্য উপলব্ধ: https://angular.io/guide/ngmodule#create-the-feature-module

Answer 5

আপনি অন্য মডিউল থেকে যা কিছু ব্যবহার করতে চান, তা কেবল এক্সপোর্ট অ্যারেতে রেখে দিন । এটার মত-

 @NgModule({
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule]
})

Answer 6

একটি বড় এবং দুর্দান্ত পদ্ধতির হ'ল একটি থেকে মডিউলটি লোড করা 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);
    });
}

আমি থেকে এই পেয়েছিলাম এখানে ।

Comments

এনজিএমডিউলফ্যাক্টরিলডার এখন অবচয় করা হয়েছে তাই এই জিনিসটি করার সর্বোত্তম বিকল্প উপায় কী?

— মোজাফফর মাহমুদ

Answer 7

অন্যান্য মডিউলের একটি মডিউল হিসাবে ঘোষিত একটি কম্পোনেন্ট কীভাবে ব্যবহার করবেন তা সলভ করা হয়েছে।

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

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{}

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

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