要实现Angular只在首页上显示组件，可以使用路由守卫来控制组件的显示。以下是一种解决方法的示例代码：

1. 创建一个路由守卫服务 AuthGuard，用于控制组件的显示：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    // 在这里添加你的条件判断逻辑，判断是否在首页上
    const isHomePage = state.url === '/';
    
    if (!isHomePage) {
      // 如果不是首页，则重定向到首页
      this.router.navigate(['/']);
      return false;
    }
    
    return true;
  }
}

2. 在路由配置中使用路由守卫控制组件的显示：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { OtherComponent } from './other/other.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'other', component: OtherComponent } // 其他页面的路由
];

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

在上述示例中，当用户访问首页时，AuthGuard 路由守卫会返回 true，允许显示 HomeComponent 组件。当用户访问其他页面时，AuthGuard 路由守卫会返回 false，重定向到首页。

请注意，上述示例中的 HomeComponent 和 OtherComponent 分别是首页和其他页面的组件，你可以根据实际情况修改它们的名称和路径。