Başka bir modülün bileşenini kullanma

Ben açısal-cli ile oluşturulan Açısal 2.0.0 uygulaması var.

Bir bileşen oluşturup onu AppModulebildirim dizisine eklediğimde hepsi iyi, işe yarıyor.

Bileşenleri ayırmaya karar verdim, bu yüzden bir TaskModuleve bileşen oluşturdum TaskCard. Şimdi ( bileşen) TaskCardbileşenlerinden birinde kullanmak istiyorum .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{}

Tüm projeye https://github.com/evgdim/angular2 (kanban-board klasörü) adresinden ulaşılabilir.

Neyi kaçırıyorum? Ben kullanım için ne var TaskCardComponentiçinde BoardComponent?

Buradaki ana kural şudur:

Bir bileşen şablonunun derlenmesi sırasında geçerli olan seçiciler, o bileşeni bildiren modül ve bu modülün ithalatının ihracatının geçişli kapanışı tarafından belirlenir.

Yani, dışa aktarmayı deneyin:

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

Ne ihraç etmeliyim?

Diğer modüllerdeki bileşenlerin şablonlarında referans vermesi gereken bildirilebilir sınıfları dışa aktarın. Bunlar herkese açık dersleriniz. Bir sınıfı dışa aktarmazsanız, gizli kalır, yalnızca bu modülde bildirilen diğer bileşenler tarafından görülebilir.

Tembel olsun veya olmasın yeni bir modül oluşturduğunuz anda, herhangi bir yeni modül ve içine bir şey beyan ettiğinizde, bu yeni modülün temiz bir durumu vardır (Ward Bell'in https://devchat.tv/adv-in-angular/119 -aia-kaçınma-ortak-tuzaklar-açısal2 )

Açısal, her biri için geçişli modül oluşturur @NgModule.

Bu modül , başka bir modülden içe aktarılan (içe aktarılan modülün geçiş modülünde dışa aktarılan yönergeler varsa) veya geçerli modülde bildirilen yönergeleri toplar .

Modüle ait açısal derleme şablonu X.transitiveModule.directivesX içinde toplanan yönergeleri kullanır .

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

Yukarıdaki resme göre bu şekilde

• YComponentkullanamaz ZComponentnedeniyle şablonda directivesdizisi Transitive module Yihtiva etmez ZComponentçünkü YModuleiçe henüz ZModuleolan geçişli modülü bulunur ZComponentiçinde exportedDirectivesdizi.

• İçinde XComponentşablonun kullanabileceğimiz ZComponentçünkü Transitive module Xiçerdiği direktifler dizisi vardır ZComponentçünkü XModuleithalat (modülü YModule(ihracat modülü o) ZModule) ihracat direktifi olduğunuZComponent

• İçinde AppComponentşablonun biz kullanamazsınız XComponentçünkü AppModuleithalat XModuleancak XModuleihracatını yapar değil XComponent.

Ayrıca bakınız

• tembel yüklü modül neden commonModule almak zorunda? Açısal 2

• Açısal Modül SSS

• NgModule'deki bildirimler, sağlayıcılar ve ithalat arasındaki fark nedir

Sen zorunda exporthesabınızla ilgili kendisine NgModule:

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

(Açısal 2 - Açısal 7)

Bileşen yalnızca tek bir modülde bildirilebilir. Başka bir modülün bileşenini kullanmak için iki basit görev yapmanız gerekir:

1. Bileşeni diğer modülde dışa aktarma
2. Diğer modülü geçerli modüle alın

1. Modül:

Bir bileşeniniz olsun (diyelim ki: "ImportantCopmonent"), 2. Modül sayfasında yeniden kullanmak istiyoruz.

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

2. Modül:

FirstPageModule'u içe aktararak "ImportantCopmonent" i yeniden kullanır

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

Bir "özellik modülü" oluşturmak için CommonModuleiçine içe aktarmanız gerektiğini unutmayın. Yani, modül başlatma kodunuz şöyle görünecektir:

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

Daha fazla bilgiyi burada bulabilirsiniz: https://angular.io/guide/ngmodule#create-the-feature-module

Başka bir modülden ne kullanmak isterseniz, onu dışa aktarma dizisine koyun . Bunun gibi-

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

Büyük ve harika bir yaklaşım, modülü birinden yüklemek, NgModuleFactorybaşka bir modülün içine bir modülü yükleyerek şunları yükleyebilirsiniz:

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);
    });
}

Bunu buradan aldım .

DİĞER MODÜLDE BİR MODÜLDE BİRLİKTE BİLEŞEN BİR BİLEŞEN NASIL KULLANILIR.

Royi Namir açıklamasına göre (Çok teşekkür ederim). Tembel yükleme kullanılırken bir Modülde bildirilen bir bileşeni başka bir modülde yeniden kullanmak için eksik bir parça vardır.

1: Bileşeni içeren modüle dışa aktarın:

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

2: TaskCardComponent'i kullanmak istediğiniz modülde:

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

Bu şekilde ikinci modül, bileşeni ithal eden ve ihraç eden ilk modülü alır.

Modülü ikinci modüle içe aktardığımızda tekrar dışa aktarmamız gerekir. Şimdi ikinci modüldeki ilk bileşeni kullanabiliriz.