Если вы создаете приложение Angular с несколькими страницами, вам нужно использовать маршрутизацию для навигации между ними. Вы можете сделать это, создав список маршрутов с путем для каждой страницы в модуле маршрутизации.
Затем вы можете перейти на другие страницы в файле HTML с помощью тега привязки. Вы также можете перейти на другие страницы в файле TypeScript, используя метод router.navigate().
Как создать новую страницу в приложении Angular
Сначала создайте новое приложение Angular. Вы также можете использовать существующий. Если вы не знакомы с тем, как создать новое приложение Angular, вы можете узнать об этом вместе с другими вводные концепции, используемые в Angular.
-
Создайте новый компонент в своем приложении Angular. с использованием нг генерировать компонент команда:
ng сгенерировать компонент дома - Открой src/app/home/home.component.html файл и заменить текущий контент новым контентом.
<раздел класс ="содержание">
<h2> Дом </h2>
<п>
Я фотограф, занимаюсь свадебной фотографией. Посмотрите мои проекты!
</п>
<раздел класс ="открытка">
<h4> Джон & Эми </h4>
<п> Голубые горы, Австралия </п>
</div>
<раздел класс ="открытка">
<h4> Росс & Рэйч </h4>
<п> Сады долины Хантер, Австралия </п>
</div>
</div> - Заполните источник/приложение/дом/home.component.css файл со стилем для содержимого HTML.
.содержание {
высота линии: 2бэр;
размер шрифта: 1.2эм;
}.открытка {
коробка-тень: 0 4пикс. 8пикс. 0 RGBA(0, 0, 0, 0.2);
ширина: 400пикс.;
набивка: 16пикс.;
поле: 24пикс. 0пикс.;
фоновый цвет: белый дым;
семейство шрифтов: без засечек;
} - Создайте еще один компонент, используя нг генерировать компонент команду в терминале. Вы будете использовать новый компонент в качестве страницы «О нас».
ng сгенерировать компонент о - Открой src/app/about/about.component.html файл и заменить текущий контент новым контентом.
<раздел класс ="содержание">
<h2> Обо мне </h2>
<п>
я'м Джон, и я люблю фотографировать. Я занимаюсь фотографией более 25 лет. Посетите меня в моих социальных сетях:
</п>
<ссылка =""> Фейсбук </ а><бр>
<ссылка =""> LinkedIn </ а><бр>
<ссылка =""> Инстаграм </ а><бр>
</div> - Заполните источник/приложение/о/о.компонент.css файл со стилем для содержимого HTML.
.содержание {
высота линии: 2бэр;
размер шрифта: 1.2эм;
}
Как перемещаться между двумя страницами
Вы можете использовать маршрутизацию для перехода с одной страницы на другую. Вы можете настроить это в файле маршрутизации. В этом примере будет один файл маршрутизации для всего приложения, расположенный в источник/приложение/приложение-routing.module.ts.
- Если в вашем приложении еще нет файла модуля маршрутизации приложений, вы можете создать его с помощью нг сгенерировать модуль команда. В командной строке или терминале перейдите в корневую папку приложения и выполните следующую команду:
ng сгенерировать модуль app-routing --module app --flat - Это создаст файл app-routing.module.ts в вашем источник/приложение папка.
- В верхней части файла добавьте дополнительные импорты для компонентов «Главная» и «О программе». Убедитесь, что вы также импортируете RouterModule и CommonModule; в конечном итоге ваши операторы импорта должны выглядеть так:
импорт {ОбщийМодуль} из '@угловой/общий';
импорт { Маршруты, RouterModule } из '@угловой/маршрутизатор';
импорт { Домашний компонент } из './home/home.component';
импорт {О компоненте} из './о/о.компонент'; - Под импортом добавьте новый массив маршрутов для хранения путей, которые вы будете использовать при маршрутизации на каждую страницу.
константа маршруты: Маршруты = [
{ дорожка: '', составная часть: HomeComponent },
{ дорожка: 'о', составная часть: О компоненте }
]; - Замените блок NgModule следующим, который добавляет RouterModule в массив импорта и экспорта.
@NgModule({
объявления: [],
импорт: [
общий модуль,
RouterModule.forRoot (маршруты)
],
экспортирует: [RouterModule]
}) - в источник/приложение/приложение.компонент.html файл, удалите текущий контент и добавьте тег router-outlet.
<раздел класс ="контейнер">
<роутер-розетка></router-outlet>
</div>
Как перейти на новую страницу в файле HTML
Чтобы перейти на страницу в файле HTML, используйте тег привязки. В атрибуте href добавьте путь, который вы указали в массиве маршрутов.
- в источник/приложение/приложение.компонент.html файл, добавьте два тега привязки перед контейнером div. Это позволит вам перемещаться между страницами «Главная» и «О программе».
<раздел класс ="панель навигации">
<класс ="ссылка на сайт" ссылка="">Дом</ а>
<класс ="ссылка на сайт" ссылка="/about">О</ а>
</div> - Добавьте стиль к источник/приложение/приложение.компонент.css файл.
.контейнер {
поле: 48пикс. 35%;
семейство шрифтов: &цитата;Ариал&цитата;, без засечек;
отображать: сгибаться;
flex-направление: столбец;
выравнивание элементов: центр;
}.navbar {
фоновый цвет: темно-сланцево-серый;
набивка: 30пикс. 50пикс.;
отображать: сгибаться;
выравнивание элементов: центр;
семейство шрифтов: без засечек;
}.ссылка на сайт: первый тип {
край справа: 32пикс.;
}.ссылка на сайт {
цвет: белый;
украшение текста: никто;
размер шрифта: 14пт;
вес шрифта: смелый;
} - Добавьте стиль к общему полю страницы в источник/styles.css.
тело {
поле: 0;
набивка: 0;
} - В командной строке или терминале перейдите в корневую папку приложения Angular. Запустите приложение с помощью нг служить команду и дождитесь окончания ее компиляции.
нг служить - В браузере введите localhostURL в адресную строку, чтобы просмотреть свое приложение. По умолчанию это обычно http://localhost: 4200/.
- Ваш сайт загрузится на главную страницу.
- Вы можете перейти на страницу «О программе», щелкнув ссылку «О программе» на панели навигации.
Как перейти на новую страницу в файле TypeScript
Пока что в этой демонстрации для обеспечения навигации используются стандартные HTML-ссылки. Для навигации с использованием файла TypeScript вместо файла HTML вы можете использовать маршрутизатор.навигация().
- в источник/приложение/приложение.компонент.html файл, удалите теги привязки и замените их тегами кнопок. Эти кнопки будут иметь событие click, которое запускает функцию clickButton(). Когда вы вызываете функцию clickButton(), добавьте путь маршрута URL-адреса в качестве аргумента.
<класс кнопки ="ссылка на сайт" (клик)="щелчоккнопка('')">Дом</button>
<класс кнопки ="ссылка на сайт" (клик)="щелчоккнопка('/about')">О</button> - Добавьте немного стиля кнопкам в источник/приложение/приложение.компонент.css файл.
кнопка {
фоновый цвет: черный;
набивка: 4пикс. 8пикс.;
курсор: указатель;
} - В верхней части источник/приложение/приложение.component.ts файл, импортируйте файл router.
импорт { Маршрутизатор } из '@угловой/маршрутизатор'; - Добавьте новый конструктор в класс AppComponent и внедрите маршрутизатор в параметры.
конструктор(частный маршрутизатор: Маршрутизатор) {
} - Под конструктором создайте новую функцию с именем clickButton(), которая будет переходить на новую страницу на основе переданного вами URL-адреса.
clickButton (путь: строка) {
это.router.navigate([путь]);
} - Повторно запустите команду ng serve в командной строке или терминале.
нг служить - Перейдите на свой сайт в браузере. Href теперь заменен двумя кнопками.
- Нажми на О кнопка. Он будет перенаправлен на страницу «О программе».
Создание нескольких страниц в приложении Angular
Вы можете маршрутизировать между несколькими страницами в приложении Angular с помощью маршрутизации. Если у вас есть отдельные компоненты для каждой страницы, вы можете настроить пути для своих маршрутов в модуле маршрутизации.
Чтобы перейти на другую страницу через файл HTML, используйте тег привязки с атрибутом href в качестве пути маршрутизации к этой странице. Чтобы перейти на другую страницу через файл TypeScript, вы можете использовать метод router.navigate().
Если вы создаете приложение Angular, вы можете использовать директивы Angular. Они позволяют использовать динамические операторы if, циклы for или другие логические операции в HTML-файле компонента.
