2016-08-10 13 views
11

Aktualizuję tylko mój angular2-app na nowy RC5. Zaszedłem dość daleko i wszystko wydaje się w porządku, ale teraz chcę je ponownie zorganizować w NgModules i natknąłem się na jedną rzecz: Użyłem komponentu ("ComponentA") w wielu innych komponentach w różnych modułach (np. ModuleA & ModuleB) .Angular2 RC5 shared Component between Modules

Tak szybko, jak używać go w ten sposób, otrzymuję komunikat:

Uncaught Rodzaj Componenta jest częścią deklaracji z 2 modułów: ModuleA i ModuleB!

Błąd.

O ile widzę, jedynym sposobem na obejście tego jest użycie Shared-Module z wszystkimi moimi zwykłymi rzeczami, czy tak? Czy istnieje łatwiejszy sposób udostępniania komponentów w modułach?

góry dzięki :)

+0

[To] (https://medium.com/@alihaghighatkhah/creating-a-shared-module-in-angular2-d281632316ff#.w0dpsvf48) artykuł może ci pomóc . – Reyraa

Odpowiedz

22

Musisz zrobić moduł do wspólnego składnika i zaimportować ten moduł, w którym chcesz używać tego komponentu.

Zgodnie z komunikatem o błędzie, komponent (lub dyrektywa lub potok) może być wymieniony tylko w directives z dokładnie jednego modułu.

Jeśli chcesz ponownie użyć, musisz dodać moduł zawierający go do @NgModule({imports: [...]}) modułu, z którego chcesz go użyć.

+0

Obawiałem się, że to była jedyna odpowiedź.;) Dziękuję za błyskawiczną odpowiedź [Czy zaakceptuję tak szybko, jak to mi pozwól] –

+1

jakiś przykład kodu? – albanx

+2

https://angular.io/docs/ts/latest/guide/ngmodule.html –

4

Tworzę moduł zawierający WSZYSTKIE moje udostępnione komponenty.

Ułatwia to importowanie go do innych modułów.

Wskazówka dla profesjonalistów: umieść w swoich modułach trasę i spróbuj - dla zabawy - sprawić, że jeden z nich będzie leniwy.

Wtedy myślisz: „Moduły whoaaaaa są cooooolllll”

+0

Hehe, dziękuję za odpowiedź. Po dodaniu wspólnego modułu zdałem sobie sprawę, że to plusy ... W końcu to dobrze! Leniwe ładowanie jest na mojej liście do zrobienia w następnej kolejności. –

+2

Jeśli to pomaga, zrobiłem repo na Github, który tworzy demo za pomocą Angular2, Webpack2, Typescript2 i Angular-Material. I aplikacja, którą zbieram wszystkie materiały-komponenty do wspólnego modułu, z którego następnie korzystam. Repo można również uruchomić w kontenerze Docker. https://github.com/spock123/angular2-webpack2-typescript2 – Spock

+1

Postępuję zgodnie z tym podejściem; mój udostępniony moduł zawiera np. moje składniki nagłówka i stopki. Ale ponieważ moduł udostępniony nie ma routingu, nie mogę mieć linków routingu w nagłówku. Jak to naprawić? Czy masz osobny komponent nagłówka dla każdego modułu? – Boland

4

Musisz użyć modułu współdzielony.

Moduł SharedModule umożliwia udostępnianie powszechnie używanych komponentów, dyrektyw i potoków w szablonach komponentów w wielu innych modułach.

Musisz eksportować & zaimportować go do innych modułów, gdziekolwiek chcesz.

po więcej szczegółów patrz odnośnik shared module