अन्य मॉड्यूल से घटक का उपयोग करें

Question

मेरे पास कोणीय-क्ली के साथ एंगुलर 2.0.0 ऐप है।

जब मैं एक घटक बनाता हूं और 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 (kanban-board फ़ोल्डर) पर उपलब्ध है

मैं क्या खो रहा हूँ? TaskCardComponentमें उपयोग करने के लिए मुझे क्या करना होगा BoardComponent?

Answer 1

यहाँ मुख्य नियम यह है कि:

घटक टेम्पलेट के संकलन के दौरान जो चयनकर्ता लागू होते हैं, वे उस घटक द्वारा घोषित मॉड्यूल द्वारा निर्धारित किए जाते हैं, और उस मॉड्यूल के आयात के निर्यात के सकर्मक समापन।

इसलिए, इसे निर्यात करने का प्रयास करें:

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

मुझे क्या निर्यात करना चाहिए?

घोषणा योग्य कक्षाएं निर्यात करें जो अन्य मॉड्यूल में घटक उनके टेम्पलेट्स में संदर्भ देने में सक्षम होना चाहिए। ये आपके सार्वजनिक वर्ग हैं। यदि आप किसी वर्ग को निर्यात नहीं करते हैं, तो यह निजी रहता है, केवल इस मॉड्यूल में घोषित अन्य घटक को दिखाई देता है।

जिस मिनट आप एक नया मॉड्यूल बनाते हैं, आलसी या नहीं, कोई भी नया मॉड्यूल और आप उसमें कुछ भी घोषित करते हैं, उस नए मॉड्यूल में एक स्वच्छ स्थिति होती है (जैसा कि वार्ड बेल ने कहा है https://devchat.tv/adv-in-angular/119 में -या-परहेज-आम-नुकसान-कोणीय 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

इस तरह से ऊपर चित्र के अनुसार

• YComponentZComponentअपने टेम्प्लेट में उपयोग नहीं कर सकते क्योंकि 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।

यह सभी देखें

• क्यों आलसी लोड मॉड्यूल के लिए आम आयात करना पड़ता है? कोणीय 2

• कोणीय मॉड्यूल अक्सर पूछे जाने वाले प्रश्न

• NgModule में घोषणाओं, प्रदाताओं और आयात के बीच अंतर क्या है

Comments

मैं आयात मोड में मार्ग परिभाषा में इस "TaskCardComponent" का उपयोग कैसे करूं?

— जैकऑफऑल

क्या शानदार जवाब है। क्या आपने ड्राइंग बनाई? यदि हां, तो मैं अवाक हूं। सभी ने अपने जवाब में ऐसा प्रयास नहीं किया। धन्यवाद

— Royi Namir

@Royi हाँ, यह मेरी तस्वीर है :) यह github.com/angular/angular/blob/master/packages/compiler/src/…

— yurzui

@yuruzi, मैं डोम नोड सीधे बिना संदर्भ पारित नहीं हो सकता stackoverflow.com/questions/47246638/... plnkr.co/edit/DnnjFBa3HLzFKNIdE4q5?p=preview

— Karty

@yurzui ... मुझे समझ नहीं आता कि YComponent कैसे ZModule का निर्यात कर सकता है, क्योंकि मैं देख रहा हूं कि एक अलग फ़ाइल (y.module.ts) के रूप में है और इसका कोई आयात नहीं है ताकि अन्य मॉड्यूल निर्यात किया जा सके (जो z है .module.ts) [अगर इसका मूल प्रश्न हो तो मुझे

— बताएं

Answer 2

आप exportइसे अपने से है NgModule:

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

Comments

यह काम करता है, जब तक कि टास्कमॉडल को AppModule में आयात किया जाता है। यह तब विफल हो जाता है जब टास्कमॉडल आलसी हो जाता है।

— अरुण

Answer 3

(कोणीय २ - कोणीय Ang)

घटक को केवल एक मॉड्यूल में घोषित किया जा सकता है। किसी अन्य मॉड्यूल से एक घटक का उपयोग करने के लिए, आपको दो सरल कार्य करने होंगे:

1. अन्य मॉड्यूल में घटक निर्यात करें
2. वर्तमान मॉड्यूल में अन्य मॉड्यूल आयात करें

पहला मॉड्यूल:

एक घटक है (इसे कॉल करें: "इकोनॉमिक कोम्पोनेंट"), हम 2 मॉड्यूल के पेज में फिर से उपयोग करना चाहते हैं।

@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 को आयात करके "ImportantCopmonent" का पुन: उपयोग करता है

@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

NgModuleFactoryLoader अब पदावनत हो गया है तो इसका सबसे अच्छा वैकल्पिक तरीका क्या है?

— मुजफ्फर महमूद

Answer 7

अन्य मोड में एक मॉड्यूल में घोषित एक घटक का उपयोग कैसे करें।

रॉय नमिर स्पष्टीकरण पर आधारित (बहुत बहुत धन्यवाद)। किसी अन्य मॉड्यूल में मॉड्यूल में घोषित घटक का पुन: उपयोग करने के लिए एक लापता हिस्सा है जबकि आलसी लोडिंग का उपयोग किया जाता है।

1: मॉड्यूल में घटक को शामिल करें जिसमें यह है:

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

2: मॉड्यूल में जहां आप टास्ककार्ड.कॉम ​​का उपयोग करना चाहते हैं:

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

इस तरह दूसरा मॉड्यूल पहले मॉड्यूल का आयात करता है जो घटक को आयात और निर्यात करता है।

जब हम मॉड्यूल को दूसरे मॉड्यूल में आयात करते हैं तो हमें इसे फिर से निर्यात करने की आवश्यकता होती है। अब हम दूसरे मॉड्यूल में पहले घटक का उपयोग कर सकते हैं।