Ако създавате Angular приложение с множество страници, трябва да използвате маршрутизиране, за да навигирате между тях. Можете да направите това, като създадете списък с маршрути с път за всяка страница в модула за маршрутизиране.
След това можете да насочвате към други страници в рамките на HTML файл, като използвате anchor таг. Можете също така да маршрутизирате към други страници в TypeScript файл, като използвате метода router.navigate().
Как да създадете нова страница в Angular приложение
Първо, създайте ново Angular приложение. Можете също така да използвате съществуващ. Ако не сте запознати с това как да създадете ново приложение Angular, можете да научите за него заедно с други въвеждащи концепции, използвани в Angular.
-
Създайте нов компонент във вашето приложение Angular използвайки ng генерира компонент команда:
ng генериране на начален компонент - Отвори src/app/home/home.component.html файл и заменете текущото съдържание с ново съдържание.
<div клас="съдържание">
<h2> У дома </h2>
<стр >
Аз съм фотограф, занимаващ се със сватбена фотография. Вижте моите проекти!
</стр>
<div клас="карта">
<h4> Джон & Ейми </h4>
<стр> Сините планини, Австралия </стр>
</div>
<div клас="карта">
<h4> Рос & Рач </h4>
<стр> Hunter Valley Gardens, Австралия </стр>
</div>
</div> - Напълнете src/app/home/home.component.css файл със стил за HTML съдържание.
.съдържание {
височина на линията: 2рем;
размер на шрифта: 1.2em;
}.карта {
кутия-сянка: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
ширина: 400px;
подплата: 16px;
марж: 24px 0px;
Цвят на фона: бял дим;
шрифтово семейство: безсерифен;
} - Създайте друг компонент, като използвате ng генерира компонент команда в терминала. Ще използвате новия компонент като страница за информация.
ng генерира компонент около - Отвори src/app/about/about.component.html файл и заменете текущото съдържание с ново съдържание.
<div клас="съдържание">
<h2> За мен </h2>
<стр>
аз'm Джон, и аз обичам да правя снимки. Занимавам се със снимки повече от 25 години. Посетете ме в моите социални медии:
</стр>
<a href=""> Facebook </a><бр>
<a href=""> LinkedIn </a><бр>
<a href=""> Instagram </a><бр>
</div> - Напълнете src/app/about/about.component.css файл със стил за HTML съдържание.
.съдържание {
височина на линията: 2рем;
размер на шрифта: 1.2em;
}
Как да навигирате между двете страници
Можете да използвате маршрутизиране, за да навигирате от една страница към друга. Можете да конфигурирате това във файл за маршрутизиране. Този пример ще има един файл за маршрутизиране за цялото приложение, разположен в src/app/app-routing.module.ts.
- Ако вашето приложение все още няма файла на модула за маршрутизиране на приложението, можете да генерирате такъв, като използвате ng генерира модул команда. В команден ред или терминал отворете главната папка на приложението и изпълнете следната команда:
ng генерира модул app-routing --module app --flat - Това ще създаде файл app-routing.module.ts във вашия src/приложение папка.
- В горната част на файла добавете допълнителни импортирания за компонентите Home и About. Уверете се, че също импортирате RouterModule и CommonModule; в крайна сметка вашите отчети за импортиране трябва да изглеждат така:
импортиране {CommonModule} от '@angular/common';
импортиране { Маршрути, RouterModule } от '@angular/router';
импортиране { HomeComponent } от './home/home.component';
импортиране { AboutComponent } от './about/about.component'; - Под импортиранията добавете нов масив от маршрути, за да съхраните пътищата, които ще използвате, когато маршрутизирате към всяка страница.
конст маршрути: Маршрути = [
{ път: '', компонент: HomeComponent},
{ път: 'относно', компонент: AboutComponent}
]; - Заменете блока NgModule със следния, който добавя RouterModule към масива за импортиране и експортиране.
@NgModule({
декларации: [],
внос: [
CommonModule,
RouterModule.forRoot (маршрути)
],
експортира: [RouterModule]
}) - В src/app/app.component.html файл, премахнете текущото съдържание и добавете етикета на рутер-изход.
<div клас="контейнер">
<рутер-изход></router-outlet>
</div>
Как да навигирате до новата страница в HTML файл
За да отидете до страница в рамките на HTML файл, използвайте anchor тага. В атрибута href добавете пътя, който сте посочили в масива routes.
- В src/app/app.component.html файл, добавете два маркера за котва преди контейнера div. Това ще ви позволи да навигирате между началната страница и страницата About.
<div клас="навигационна лента">
<клас="връзка" href="">У дома</a>
<клас="връзка" href="/about">относно</a>
</div> - Добавете малко стил към src/app/app.component.css файл.
.контейнер {
марж: 48px 35%;
шрифтово семейство: "Arial", безсерифен;
дисплей: flex;
flex-direction: колона;
подравняване на елементи: център;
}.navbar {
Цвят на фона: тъмносиво;
подплата: 30px 50px;
дисплей: flex;
подравняване на елементи: център;
шрифтово семейство: безсерифен;
}.връзка:първи от тип {
margin-right: 32px;
}.връзка {
цвят: бяло;
текст-украса: нито един;
размер на шрифта: 14pt;
тегло на шрифта: удебелен;
} - Добавете малко стил към общото поле на страницата src/styles.css.
тяло {
марж: 0;
подплата: 0;
} - В команден ред или терминал отидете до основната папка на приложението Angular. Стартирайте приложението с помощта на ng служи команда и изчакайте да завърши компилирането.
ng служи - В браузър въведете localhostURL в URL лентата, за да видите вашето приложение. По подразбиране обикновено това е http://localhost: 4200/.
- Вашият уебсайт ще се зареди на началната страница.
- Можете да навигирате до страницата About, като щракнете върху връзката About в лентата за навигация.
Как да навигирате до новата страница в TypeScript файл
Досега тази демонстрация използва стандартни HTML връзки за осигуряване на навигация. За да навигирате с TypeScript файл вместо HTML файл, можете да използвате router.navigate().
- В src/app/app.component.html файл, премахнете маркерите за закрепване и ги заменете с тагове за бутони. Тези бутони ще имат събитие за щракване, което задейства функция, наречена clickButton(). Когато извиквате функцията clickButton(), добавете пътя на URL адреса като аргумент.
<бутон клас="връзка" (щракване)="clickButton('')">У дома</button>
<бутон клас="връзка" (щракване)="clickButton('/about')">относно</button> - Добавете малко стил към бутоните в src/app/app.component.css файл.
бутон {
Цвят на фона: черен;
подплата: 4px 8px;
курсор: показалец;
} - В горната част на src/app/app.component.ts файл, импортирайте рутера.
импортиране { Рутер } от '@angular/router'; - Добавете нов конструктор в класа AppComponent и инжектирайте рутера в рамките на параметрите.
конструктор(частен рутер: рутер) {
} - Под конструктора създайте нова функция, наречена clickButton(), която ще навигира до новата страница въз основа на URL адреса, който подавате.
clickButton (път: низ) {
това.router.navigate([път]);
} - Изпълнете отново командата ng serve в командния ред или терминала.
ng служи - Отидете до уебсайта си в браузър. Href вече е заменен с два бутона.
- Кликнете върху относно бутон. Той ще насочи към страницата About.
Създаване на множество страници в Angular приложение
Можете да маршрутизирате между множество страници в приложение Angular, като използвате маршрутизиране. Ако имате отделни компоненти за всяка страница, можете да конфигурирате пътища за вашите маршрути в рамките на модула за маршрутизиране.
За да отидете до друга страница чрез HTML файл, използвайте anchor таг с атрибута href като път за маршрутизиране към тази страница. За да отидете до друга страница чрез TypeScript файл, можете да използвате метода router.navigate().
Ако изграждате Angular приложение, можете да използвате Angular директиви. Те ви позволяват да използвате динамични if-операции, for-цикли или други логически операции в рамките на HTML файла на компонент.