1. 定义一个CSS类选择器，并设置标题大小为你想要的大小。具体大小根据你的需求而定。例如：

   .shrink { height: 60px; font-size: 20px; }

2. 在你的组件类中，编写以下的代码来监听滚动事件，并在页面滚动距离超过指定高度时，给标题元素添加 .shrink 类：

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

   @Component({ selector: 'app-header', template:

   ...
   , styleUrls: ['./header.component.css'] }) export class HeaderComponent { scrolled: boolean = false;

   @HostListener("window:scroll", []) onWindowScroll() { if (window.pageYOffset > 150) { this.scrolled = true; } else { this.scrolled = false; } } }

3. 按照上述方式修改自己的HTML文件，并动态绑定一个class属性：

4. 在你的CSS文件中添加shrink类的样式：

   .header.shrink { height: 60px; font-size: 20px; }

现在，当滚动距离超过指定高度时，标题应该缩小到你想要的大小。