* Самостоятельно изучаю HTML, умею работать с CSS и JS, умею использовать bootstrap.
*это первый раз, когда мы используем интерфейсные фреймворки.
*Английский – мой второй язык
Angular CLI: 17.3.3
Node: 20.11.1
Package Manager: npm 10.2.4
когда я ищу, я обнаруживаю, что Angular 17 основан на компонентах.
1- я пытаюсь создать одностраничное приложение, содержащее 5 страниц, каждая страница содержит 5 или 6 разных частей (абзац, таблица, карточка и т. д.), все страницы имеют одинаковый верхний и нижний колонтитул.
2- для простоты предположим, что я попробую собрать SPA, который содержит:
2-a. two pages
2-b. every page contain two different paragraph, overall four paragraph
2-c. share same header and footer
3- я узнаю, как создать общий верхний и нижний колонтитулы
4- я узнаю, как заставить работать панель навигации (направить каждую вкладку на определенный компонент)
проблема: я хочу создать отдельный компонент для каждого абзаца. всего будет создано четыре компонента, по два компонента на каждую страницу.
Итак, как я могу настроить маршрутизатор на отображение двух разных компонентов (c1, c2 на первой странице и c3, c4 на второй странице) на одной странице?
🤔 А знаете ли вы, что...
Angular предоставляет средства для обработки событий и пользовательского ввода.
Вы можете создать компонент-оболочку, содержащую эти два компонента, и установить его в маршрутизации. Компонент — это всего лишь фиктивный класс, необходимый для маршрутизации для отображения компонента. Пожалуйста, просмотрите приведенный ниже рабочий пример и дайте мне знать, если возникнут какие-либо сомнения!
import { Component } from '@angular/core';
import { RouterModule, provideRouter } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { OneComponent } from './app/one/one.component';
import { TwoComponent } from './app/two/two.component';
import { ThreeComponent } from './app/three/three.component';
import { FourComponent } from './app/four/four.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterModule],
template: `
<a [routerLink] = "['group1']">group 1 </a> |
<a [routerLink] = "['group2']">group 2 </a>
<br/>
<router-outlet/>
`,
})
export class App {
name = 'Angular';
}
@Component({
selector: 'wrapper1',
standalone: true,
imports: [OneComponent, TwoComponent],
template: `
<app-one/>
<app-two/>
`,
})
export class WrapperComponent {
name = 'Angular';
}
@Component({
selector: 'wrapper2',
standalone: true,
imports: [ThreeComponent, FourComponent],
template: `
<app-three/>
<app-four/>
`,
})
export class Wrapper2Component {
name = 'Angular';
}
bootstrapApplication(App, {
providers: [
provideRouter([
{
path: 'group1',
component: WrapperComponent,
},
{
path: 'group2',
component: Wrapper2Component,
},
{
path: '**',
redirectTo: 'group1',
pathMatch: 'full',
},
]),
],
});