Góc 2 Sử dụng thành phần từ một mô-đun khác

Question

Tôi có ứng dụng Góc 2 (phiên bản 2.0.0 - cuối cùng) được tạo bằng angular-cli.

Khi tôi tạo một thành phần và thêm nó vào mảng khai báo của AppModule, tất cả đều tốt, nó hoạt động.

Tôi quyết định tách các thành phần, vì vậy tôi đã tạo một TaskModule và một thành phần TaskCard. Bây giờ tôi muốn sử dụng TaskCard ở một trong các thành phần của AppModule (thành phần Board).

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

Toàn bộ dự án có sẵn trên https://github.com/evgdim/angular2 (Kanban-board thư mục)

Những gì tôi đang thiếu? Tôi phải làm gì để sử dụng TaskCardComponent trong BoardComponent?

Answer 1

Cố gắng xuất nó:

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

tôi nên xuất cái gì?

Xuất lớp declarable rằng các thành phần trong các module khác nên thể tham khảo trong các mẫu của họ. Đây là những lớp học công cộng của bạn. Nếu bạn không xuất một lớp, nó sẽ ở chế độ riêng tư, chỉ hiển thị với thành phần được khai báo trong mô-đun này.

Giây phút bạn tạo một module mới, lười biếng hay không, bất kỳ thành phần mới và bạn khai báo bất cứ điều gì vào nó, đó là mô-đun mới có một trạng thái sạch (như Phường Bell nói trong https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2)

Góc tạo ra mô-đun chuyển tiếp cho mỗi @NgModule s.

Mô-đun này thu thập chỉ thị nhập từ mô-đun khác (nếu mô-đun chuyển tiếp của mô-đun đã nhập có chỉ thị đã xuất) hoặc được khai báo trong mô-đun hiện tại.

Khi góc biên dịch mẫu thuộc về mô-đun X, nó được sử dụng các chỉ thị đã được thu thập trong 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

Bằng cách này theo hình trên

• YComponent không thể sử dụng ZComponent trong mẫu của nó vì directives mảng của Transitive module Y không chứa ZComponent bởi vì YModule chưa nhập ZModule có mô-đun chuyển tiếp chứa ZComponent trong mảng exportedDirectives.

• Trong XComponent mẫu chúng ta có thể sử dụng ZComponent vì Transitive module X có chỉ thị mảng chứa ZComponent vì XModule nhập khẩu mô-đun (YModule) mà xuất khẩu mô-đun (ZModule) rằng xuất khẩu chỉ thị ZComponent

• Trong AppComponent mẫu chúng ta không thể sử dụng XComponent vì AppModule nhập XModule nhưng XModule không xuất XComponent.

cũng Xem

• why lazy loaded module has to import commonModule? Angular 2

• Angular Module FAQs

• What is difference between declarations, providers and import in NgModule

Answer 2

Bạn phải export nó từ NgModule của bạn:

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

Answer 3

Dù bạn muốn sử dụng từ mô-đun khác, chỉ cần đặt nó trong mảng xuất khẩu. Giống như this-

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

Answer 4

Lưu ý rằng để tạo ra một cái gọi là "mô-đun tính năng", bạn cần phải nhập khẩu CommonModule bên trong nó. Vì vậy, mã khởi tạo mô-đun của bạn sẽ trông như thế này:

thông tin

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

More sẵn ở đây: https://angular.io/guide/ngmodule#create-the-feature-module