我开始在VS 2022中构建我的第一个C#/Angular项目。到目前为止我的布局是这样的

Index.html包含了带有页眉、菜单和页脚代码等的启动页面。它还有这个

<main-root></main-root>

它按预期合并到main.component.html中的代码中。
这是main.component.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
  selector: 'main-root',
  templateUrl: './main.component.html'
})
export class MainComponent {
  title = 'TestPage';
}

这是main.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MainComponent } from './main.component';
@NgModule({
  declarations: [
    MainComponent
  ],
  imports: [
    BrowserModule, HttpClientModule
  ],
  providers: [],
  bootstrap: [MainComponent]
})
export class MainModule { }

所有这些都编译和运行良好，所以我接下来要做的是当用户单击网页上的正确按钮时，main-root被替换为grid-root，并且index.html的该部分被刷新。
谁能告诉我如何做到这一点，请。
Thanks in advance
Kev