*自学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)?
您可以创建一个包装组件,其中包含这两个组件并在路由中进行设置。该组件只是路由所需的一个虚拟类来显示该组件,请仔细阅读下面的工作示例,如果有任何疑问,请告诉我!
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',
},
]),
],
});