다른 모듈의 구성 요소 사용

다른 모듈의 구성 요소 사용

angular-cli로 생성된 Angular 2.0.0 앱을 가지고 있습니다.

를 에 할 때AppModule의 선언 배열은 모두 정상입니다. 작동하죠.

했기 에 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★TaskModule 컴포넌트 ' ' ' 'TaskCard 를 TaskCard의 중 AppModule(the)Board★★★★★★★★★★★★★★★★★★」

앱 모듈:

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

작업 모듈:

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(칸반보드 폴더)에서 확인할 수 있습니다.

가가무 엇뜨 ?뜨? ??? what what what를 사용하려면 어떻게 해야 하나요?TaskCardComponentBoardComponent

여기서의 주요 규칙은 다음과 같습니다.

컴포넌트 템플릿 컴파일 중에 적용할 수 있는 실렉터는 해당 컴포넌트를 선언하는 모듈과 해당 모듈의 Import 내보내기를 잠정적으로 종료하는 모듈에 의해 결정됩니다.

따라서 내보내기를 시도합니다.

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] // <== export the component you want to use in another module
})
export class TaskModule{}

무엇을 수출해야 합니까?

다른 모듈의 컴포넌트가 템플릿에서 참조할 수 있는 선언 가능한 클래스를 내보냅니다.이것들은 당신의 공개 수업입니다.클래스를 내보내지 않으면 비공개로 유지되며 이 모듈에서 선언된 다른 구성 요소에만 표시됩니다.

게으르든 게으르든 상관없이 새로운 모듈을 만들고 그 안에 어떤 것이든 선언하면 그 새로운 모듈은 깨끗한 상태가 됩니다(Ward Bell이 https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2)에서 설명했듯이).

Angular는 다음 각 항목에 대해 과도 모듈을 생성합니다.@NgModules.

이 모듈은 다른 모듈에서 가져오거나(가져온 모듈의 전이 모듈이 지침을 내보낸 경우) 현재 모듈에서 선언한 지침을 수집합니다.

to모듈에 을 컴파일 하는 XX.transitiveModule. 디렉티브에서 수집된 디렉티브를 사용합니다.

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 YZComponentYModule.ZModule에 '''가 포함되어 .ZComponentexportedDirectivesmanager.manager로 하다

• ★★★내XComponent할 수 ZComponentTransitive module X에는 has that that that direct has has 에는, 「Directive Array」가 포함되어 있습니다.ZComponentXModulemodule (Imports module)YModule )을 ZModule )는 디렉티브 「Directive」를 .ZComponent

• ★★★내AppComponent사용할 수 없는 템플릿XComponent왜냐면AppModuleImports(수입)XModule그렇지만XModule내보내지 않다XComponent.

「 」를 참조해 주세요.

• lazy loaded 모듈이 common Module을 Import해야 하는 이유는 무엇입니까?각도 2

• 각도 모듈에 관한 FAQ

• NgModule에서의 선언, 공급자 및 Import의 차이점은 무엇입니까?

(각도 2 - 각도 7)

컴포넌트는 단일 모듈에서만 선언할 수 있습니다.다른 모듈의 컴포넌트를 사용하려면 다음 두 가지 간단한 작업을 수행해야 합니다.

1. 다른 모듈의 구성 요소를 내보냅니다.
2. 다른 모듈을 현재 모듈로 가져옵니다.

첫 번째 모듈:

컴포넌트(「Important Component」라고 부름)를 준비합니다.두 번째 모듈의 페이지에서 재사용합니다.

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

---

두 번째 모듈:

First Page Module을 Import하여 "Important Component"를 재사용합니다.

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

해야 한다export네 것부터NgModule:

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

이른바 '피처 모듈'을 작성하려면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 를 참조해 주세요.

다른 모듈에서 사용하는 모든 것을 내보내기 배열에 넣습니다.이렇게...

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

하나의 크고 훌륭한 접근방식은 모듈을 로딩하는 것입니다.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);
    });
}

이건 여기서부터 맡겠습니다.

다른 모듈의 모듈에 선언된 컴포넌트 사용방법 해결.

Royi Namir의 설명에 근거합니다(감사합니다).느린 로딩이 사용되는 동안 모듈에 선언된 구성 요소를 다른 모듈에서 재사용할 수 있는 부품이 누락되었습니다.

첫 번째: 컴포넌트를 포함하는 모듈의 컴포넌트를 내보냅니다.

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

두 번째: TaskCardComponent를 사용하는 모듈에서 다음을 수행합니다.

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

이와 같이 두 번째 모듈은 구성 요소를 가져오고 내보내는 첫 번째 모듈을 가져옵니다.

두 번째 모듈에서 모듈을 Import할 때 다시 내보내야 합니다.이제 두 번째 모듈의 첫 번째 컴포넌트를 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/39601784/use-component-from-another-module