在Angular中，可以通过使用ActivatedRoute和Title服务来根据路由和组件数据设置页面标题。以下是一个代码示例：

首先，需要在组件中引入ActivatedRoute和Title服务：

import { ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

然后在组件的构造函数中注入ActivatedRoute和Title：

constructor(private route: ActivatedRoute, private titleService: Title) { }

接下来，在组件的ngOnInit方法中获取路由参数和设置页面标题：

ngOnInit() {
  this.route.data.subscribe(data => {
    // 获取路由参数和数据
    const routeParams = this.route.snapshot.params;
    const routeData = this.route.snapshot.data;

    // 设置页面标题
    this.titleService.setTitle(routeData.title);
  });
}

在上述代码中，this.route.data是一个可观察对象，它会在路由数据发生变化时触发。通过订阅该可观察对象，可以获取路由参数和数据。然后，使用this.titleService.setTitle方法来设置页面标题，其中routeData.title是路由数据中的标题属性。

最后，确保在路由配置中为每个路由指定标题数据。例如：

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { title: '首页' } },
  { path: 'about', component: AboutComponent, data: { title: '关于我们' } },
  // 其他路由配置...
];

在上述代码中，每个路由都有一个data属性，其中包含了页面的标题。根据需要设置不同的页面标题。

这样，当路由切换时，页面标题将根据路由配置的标题数据进行更新。