VS2022下C#/Angular单页项目：点击按钮替换main-root为grid-root

针对你的需求，推荐两种符合Angular最佳实践的实现方式，避免直接操作DOM导致的问题：

方案一：使用*ngIf条件渲染（简单场景首选） #

这种方式通过布尔变量控制两个组件的显示与隐藏，Angular会自动处理组件的初始化和销毁：

1. 修改宿主组件模板（比如app.component.html）：

<button (click)="switchToGrid()">切换到Grid组件</button>
<!-- 控制main-root和grid-root的显示 -->
<main-root *ngIf="isMainActive"></main-root>
<grid-root *ngIf="!isMainActive"></grid-root>

2. 更新宿主组件逻辑（app.component.ts）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 默认显示main-root
  isMainActive = true;

  switchToGrid() {
    this.isMainActive = false;
    // 如果需要支持来回切换，可改为 this.isMainActive = !this.isMainActive
  }
}

3. 关键注意点：

• 确保MainComponent和GridRootComponent都已在你的AppModule（或对应功能模块）的declarations数组中声明。
• 切换时组件会触发完整的生命周期（比如ngOnInit），若需保留状态可结合服务或状态管理工具。

方案二：使用Angular路由（复杂多页面场景首选） #

如果后续需要扩展更多页面，路由方式更便于管理页面状态和浏览器导航：

1. 配置路由模块（app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main/main.component';
import { GridRootComponent } from './grid/grid-root.component';

const routes: Routes = [
  // 默认路由显示main-root
  { path: '', component: MainComponent },
  // grid路由显示grid-root
  { path: 'grid', component: GridRootComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改宿主组件模板：

<button (click)="navigateToGrid()">切换到Grid组件</button>
<!-- 用router-outlet替代固定的组件标签，路由会自动渲染对应组件 -->
<router-outlet></router-outlet>

3. 添加路由跳转逻辑（app.component.ts）：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {}

  navigateToGrid() {
    this.router.navigate(['/grid']);
  }
}

4. 关键注意点：

• 确保路由模块已导入到AppModule中。
• 支持浏览器前进/后退按钮，可通过路由传递参数，适合大型应用扩展。

注意：避免直接通过原生DOM API（如document.querySelector）替换组件标签，这种方式会绕开Angular的变更检测和生命周期管理，可能导致组件无法正常工作。

内容的提问来源于stack exchange，提问作者Kev