Angular 如何使用角度（角度2或角度4）路线更改页面标题？

每当我从URL栏单击或浏览链接时，我都想更改页面的标题。如何使用角度路线来改变这一点？ 我正在使用angular版本4和angular cli。

您必须将“标题”作为数据传递到路线

const routes: Routes = [{
  path: 'calendar',
  component: CalendarComponent,
  children: [
    { path: '', redirectTo: 'new', pathMatch: 'full' },
    { path: 'all', component: CalendarListComponent, data: { title: 'My Calendar' } },
    { path: 'new', component: CalendarEventComponent, data: { title: 'New Calendar Entry' } },
    { path: ':id', component: CalendarEventComponent, data: { title: 'Calendar Entry' } }
  ]
}];

然后在组件中执行以下操作：

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

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

导入后，我们可以将它们同时注入：

@Component({
  selector: 'app-root',
  templateUrl: `
    <div>
      Hello world!
    </div>
  `
})
export class AppComponent {
  constructor( private router: Router,
               private activatedRoute: ActivatedRoute,
               private titleService: Title) {}
}

---

您可以使用

@angular/platform浏览器
使用
setTitle（）
：

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

@Component({
  selector: 'your-component',
})

export class YourComponent implements onInit {
  constructor(private title: Title) {}

 ngOnInit() {
     this.title.setTitle('Title for this component');
 }

}

我已经用下面的方法尝试了几行代码，希望对您有所帮助

您可以在routes变量（app routing.module.ts）的数据对象中传递任何名称，如下所示

const routes: Routes = [
  {
    path: '', 
    component: Component,
    data: {
      page_title: 'Title of your page'
    }

  }
]

然后将路由数据对象中的page_title值提取到app.component.ts并设置为title

import { Router, RoutesRecognized } from '@angular/router';
import { Title } from '@angular/platform-browser';
export class AppComponent {
  page_title = '';
  constructor(private titleService: Title, private route: Router) {
    route.events.subscribe(event => {
      if (event instanceof RoutesRecognized) {
        let current_route = event.state.root.firstChild;
        this.page_title = current_route?.data.page_title;
        if (this.page_title == undefined) {
          alert('Please set page title for the routing')
        }
        else {
          titleService.setTitle(this.page_title);
        }

      }
    });
  }
}

您还可以尝试声明服务，然后将构造函数中的代码复制到服务中的函数，并在调用app.component.ts的构造函数中的服务函数后进行必要的导入，这将在未来的项目中有所帮助。
如何使用Angular route更改？通过搜索“更改页面标题angular2”。可能重复感谢，但该代码不起作用，或者我无法在我的代码中实现。然后介绍您所做的事情，以及它不起作用的具体方式，和/或您无法在代码中实现它的具体方式。感谢您的回答。但我想知道，这是更改标题的完整代码吗？我实现了这一点，但仍然无法更改标题。由于我是angular的初学者，您能给我发送完整的代码吗？完整的代码请参见以下内容：-1:
数据：{title:''.'}
在本例中未使用，因此它不会直接回答问题。看起来像是@JKing-1链接的快速复制粘贴。至少在你复制粘贴这个答案的地方给予表扬。好好工作，谢谢！它可能与此问题无关，在重定向到所有其他页面中的
setTitle
以外的其他页面后，是否有办法将其更改回原来的位置？因为在离开该页面后将保留此更改。
import { Router, RoutesRecognized } from '@angular/router';
import { Title } from '@angular/platform-browser';
export class AppComponent {
  page_title = '';
  constructor(private titleService: Title, private route: Router) {
    route.events.subscribe(event => {
      if (event instanceof RoutesRecognized) {
        let current_route = event.state.root.firstChild;
        this.page_title = current_route?.data.page_title;
        if (this.page_title == undefined) {
          alert('Please set page title for the routing')
        }
        else {
          titleService.setTitle(this.page_title);
        }

      }
    });
  }
}