Question

每当我点击或浏览网址栏中的链接时，我都想更改页面标题。如何使用Angular路线改变它？我正在使用角度版本4和角度cli。

Answer 1

您可以使用@angular/platefor-browser来使用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');
 }

}

Answer 2

你必须将“title”作为数据传递给你的路线

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' } }
  ]
}];

然后在您的Component中执行此导入：

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) {}
}

要静态更新页面标题，我们可以像这样调用setTitle：

ngOnInit() {
     this.router.events
        .filter((event) => event instanceof NavigationEnd)
        .map(() => this.activatedRoute)
        .map((route) => {
            while (route.firstChild) route = route.firstChild;
            return route;
        })
        .filter((route) => route.outlet === 'primary')
        .mergeMap((route) => route.data)
        .subscribe((event) => {
            let title = 'Default Title Here'
            if(event['title']) {
                title = event['title'];
            }
            this.titleService.setTitle(title);
        });
}

Answer 3

我用几行代码尝试了以下方法，希望对您有所帮助。

你可以在路由变量（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 的构造函数内部的服务函数后 这将有助于未来的项目。

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

3 个答案: