通过rest配置动态构建angular页面

{
  "components": [
    {
      "type": "header",
      "data": {
        "title": "Welcome to My App"
      }
    },
    {
      "type": "content",
      "data": {
        "text": "This is the main content area."
      }
    },
    {
      "type": "footer",
      "data": {
        "copyright": "© 2023 My App"
      }
    }
  ]
}

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-dynamic-page',
  template: `<ng-container *ngFor="let component of components">
               <app-header *ngIf="component.type === 'header'" [title]="component.data.title"></app-header>
               <app-content *ngIf="component.type === 'content'" [text]="component.data.text"></app-content>
               <app-footer *ngIf="component.type === 'footer'" [copyright]="component.data.copyright"></app-footer>
             </ng-container>`
})
export class DynamicPageComponent implements OnInit {
  components: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/api/page-config').subscribe((config: any) => {
      this.components = config.components;
    });
  }
}