Angular 17独立使用多个组件（以两个组件为例）

Question

*自学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）？

Answer 1

您可以创建一个包装组件，其中包含这两个组件并在路由中进行设置。该组件只是路由所需的一个虚拟类来显示该组件，请仔细阅读下面的工作示例，如果有任何疑问，请告诉我！

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',
      },
    ]),
  ],
});

Stackblitz 演示