Щракнете тук, за да споделите тази статия в LinkedIn »
След като разделите приложението си на различни модули, както направих „тук“, най-вероятно ще искате да имате родителски маршрут с неговите отделни дъщерни маршрути, зареждащи съответните им компоненти. Това, което се опитваме да избегнем, е нашият app-routing.module.ts
да бъде претрупан, както е показано по-долу:
За да постигнем това, първо трябва да разделим нашето приложение на модули и след това да използваме проста ъглова конвенция, за да съпоставим дъщерни маршрути с дъщерни компоненти. Целта на тази статия е да предостави ясни насоки как да постигнете това. „Ръководството“ на angular.io за това също е доста добро, но пиша това, за да ми помогне да науча темата и се надявам да помогна на някои други хора, докато го правя. Аз също ще се опитам да бъда по-лаконичен.
Предпоставки:
- Това ръководство предполага някои основни познания за ъгловото маршрутизиране (
<base href>
,<router-oultet>
и т.н. Ако не сте запознати с тях, можете да прочетете повече за това тук). - Приложение Angular 4+, създадено чрез Angular CLI
- Поне един модул освен AppModule (генериран от CLI по подразбиране). Ще наричам допълнителния модул вторичен модул, като AppModule е основен модул.
- Два или повече компонента в основната директория на модула. Единият от които ще бъде родителският компонент.
- Вторичният модул трябва да има свой собствен файл
module
иrouting
. Можете да видите как да направите това в моето предишно ръководство.
Стъпка 1: Коригирайте файла за маршрутизиране на родителския модул, за да декларирате родителския компонент и неговите деца.
Стъпка 2: Добавете маркера за рутер-изход във вашия шаблон на родителски компонент
Това е почти всичко! Родителският компонент ще се визуализира сам и в зависимост от URL адреса, избран от дъщерния. Шаблонът на детето, разбира се, ще бъде визуализиран динамично в изхода на рутера.
Ако не сте успели да следвате правилно, може би опитайте да прочетете моето друго просто „ръководство“ за това как първо да модулирате приложението си и след това опитайте стъпките, споменати в това ръководство. И двете са доста ниски.
Както споменах по-горе, тази статия е написана, за да улесни обучението ми и да се надявам да помогне на някои други хора. Всякакви коментари или градивна критика са добре дошли!