1. 在路由模块中定义路由：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];

2. 在app.component.html中加载路由出口：

3. 在app.component.html中添加按钮并绑定点击事件：

显示路由内容

4. 在app.component.ts中定义showContent()方法：

showContent() {
  let routerContent = document.getElementsByTagName('router-outlet')[0];
  routerContent.classList.toggle('hide');
}

5. 在app.component.css中定义.hide样式：

.hide {
  display: none;
}

6. 最后，运行应用并测试路由是否按预期工作。

完整的app.component.html代码示例：

显示路由内容

完整的app.component.ts代码示例：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  showContent() {
    let routerContent = document.getElementsByTagName('router-outlet')[0];
    routerContent.classList.toggle('hide');
  }
}

完整的app.component.css代码示例：

.hide {
  display: none;
}