Щракнете тук, за да споделите тази статия в LinkedIn »

След като разделите приложението си на различни модули, както направих „тук“, най-вероятно ще искате да имате родителски маршрут с неговите отделни дъщерни маршрути, зареждащи съответните им компоненти. Това, което се опитваме да избегнем, е нашият app-routing.module.ts да бъде претрупан, както е показано по-долу:

За да постигнем това, първо трябва да разделим нашето приложение на модули и след това да използваме проста ъглова конвенция, за да съпоставим дъщерни маршрути с дъщерни компоненти. Целта на тази статия е да предостави ясни насоки как да постигнете това. „Ръководството“ на angular.io за това също е доста добро, но пиша това, за да ми помогне да науча темата и се надявам да помогна на някои други хора, докато го правя. Аз също ще се опитам да бъда по-лаконичен.

Предпоставки:

  1. Това ръководство предполага някои основни познания за ъгловото маршрутизиране ( <base href> , <router-oultet> и т.н. Ако не сте запознати с тях, можете да прочетете повече за това тук).
  2. Приложение Angular 4+, създадено чрез Angular CLI
  3. Поне един модул освен AppModule (генериран от CLI по подразбиране). Ще наричам допълнителния модул вторичен модул, като AppModule е основен модул.
  4. Два или повече компонента в основната директория на модула. Единият от които ще бъде родителският компонент.
  5. Вторичният модул трябва да има свой собствен файл moduleи routing. Можете да видите как да направите това в моето предишно ръководство.

Стъпка 1: Коригирайте файла за маршрутизиране на родителския модул, за да декларирате родителския компонент и неговите деца.

Стъпка 2: Добавете маркера за рутер-изход във вашия шаблон на родителски компонент

Това е почти всичко! Родителският компонент ще се визуализира сам и в зависимост от URL адреса, избран от дъщерния. Шаблонът на детето, разбира се, ще бъде визуализиран динамично в изхода на рутера.

Ако не сте успели да следвате правилно, може би опитайте да прочетете моето друго просто „ръководство“ за това как първо да модулирате приложението си и след това опитайте стъпките, споменати в това ръководство. И двете са доста ниски.

Както споменах по-горе, тази статия е написана, за да улесни обучението ми и да се надявам да помогне на някои други хора. Всякакви коментари или градивна критика са добре дошли!