Mam aplikację Angular 2.0.0 wygenerowaną z angular-cli.
Kiedy tworzę komponent i dodam go do AppModule
tablicy deklaracji, wszystko jest w porządku, działa.
Zdecydowałem się oddzielić komponenty, więc utworzyłem a TaskModule
i komponent TaskCard
. Teraz chcę użyć TaskCard
w jednym ze składników AppModule
( Board
składnika).
Moduł 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 { }
Moduł zadań:
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{}
Cały projekt jest dostępny na https://github.com/evgdim/angular2 (folder kanban-board)
czego mi brakuje? Co muszę zrobić, aby użytku TaskCardComponent
w BoardComponent
?
źródło
Musisz to
export
zrobić ze swojegoNgModule
:źródło
(Angular 2 - Angular 7)
Element można zadeklarować tylko w jednym module. Aby użyć komponentu z innego modułu, musisz wykonać dwa proste zadania:
1. moduł:
Posiadamy komponent (nazwijmy go: „ImportantCopmonent”), chcemy ponownie użyć na stronie drugiego modułu.
2. moduł:
Ponownie wykorzystuje „Ważny komunikat”, importując FirstPageModule
źródło
Pamiętaj, że aby utworzyć tak zwany „moduł funkcji”, musisz go zaimportować
CommonModule
. Twój kod inicjalizacji modułu będzie wyglądał następująco:Więcej informacji dostępnych tutaj: https://angular.io/guide/ngmodule#create-the-feature-module
źródło
Czegokolwiek chcesz użyć z innego modułu, po prostu umieść go w tablicy eksportu . Lubię to-
źródło
Jednym wielkim i doskonałym podejściem jest załadowanie modułu z
NgModuleFactory
, możesz załadować moduł do innego modułu, wywołując to:Mam to stąd .
źródło
ROZWIĄZANE JAK KORZYSTAĆ Z KOMPONENTU ZADEKLAROWANEGO W MODULE W INNYM MODUŁU.
Na podstawie wyjaśnienia Royi Namir (dziękuję bardzo). Brakuje części do ponownego użycia komponentu zadeklarowanego w module w dowolnym innym module, gdy używane jest opóźnione ładowanie.
1. Wyeksportuj komponent do modułu, który go zawiera:
2-ga: W module, w którym chcesz użyć TaskCardComponent:
W ten sposób drugi moduł importuje pierwszy moduł, który importuje i eksportuje komponent.
Kiedy importujemy moduł do drugiego modułu, musimy go ponownie wyeksportować. Teraz możemy użyć pierwszego komponentu w drugim module.
źródło