Как задать название страницы в маршрутах Angular?

Question

[Speakermen]

В доках есть title но у меня ошибка что его нет
https://angular.io/guide/router#setting-the-page-title
https://angular.io/api/router/TitleStrategy

const routes: Routes = [
  {
    path: '',
    title: '',
    loadChildren: () =>
      import('./pages/home-page/home-page.module').then(
        (m) => m.HomePageModule,
      ),
  },
  {
    path: 'albums',
    loadChildren: () =>
      import('./pages/albums-page/albums-page.module').then(
        (m) => m.AlbumsPageModule,
      ),
  },
  {
    path: 'beats',
    loadChildren: () =>
      import('./pages/beats-page/beats-page.module').then(
        (m) => m.BeatsPageModule,
      ),
  },
];

Так неудобно(

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'page-beats',
  templateUrl: './beats.page.html',
  styleUrls: ['./beats.page.css'],
})
export class BeatsPage implements OnInit {
  public constructor(private readonly title: Title) {
    title.setTitle('Beats');
  }

  public ngOnInit(): void {}
}

Так костыльно)

{
    path: 'beats',
    loadChildren: () =>
      import('./pages/beats-page/beats-page.module').then(
        (m) => m.BeatsPageModule,
      ),
    data: { title: 'Beats' },
  },

Не работает

import { Injectable, NgModule } from '@angular/core';
import { Title } from '@angular/platform-browser';
import {
  ActivatedRouteSnapshot,
  RouterModule,
  RouterStateSnapshot,
  Routes,
} from '@angular/router';

@Injectable({ providedIn: 'root' })
export abstract class TitleStrategy {
  abstract updateTitle(snapshot: RouterStateSnapshot): void;
  abstract buildTitle(snapshot: RouterStateSnapshot): string | undefined;
  abstract getResolvedTitleForRoute(snapshot: ActivatedRouteSnapshot): any;
}

@Injectable({ providedIn: 'root' })
export class TemplatePageTitleStrategy extends TitleStrategy {
  constructor(private readonly title: Title) {
    super();
  }

  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      this.title.setTitle(`My Application | ${title}`);
    }
  }

  override buildTitle(snapshot: RouterStateSnapshot): string | undefined {
    return snapshot.toString();
  }

  override getResolvedTitleForRoute(snapshot: ActivatedRouteSnapshot) {}
}

const routes: Routes = [
  {
    path: '',
    loadChildren: () =>
      import('./pages/home-page/home-page.module').then(
        (m) => m.HomePageModule,
      ),
  },
  {
    path: 'albums',
    title: 'Name',
    loadChildren: () =>
      import('./pages/albums-page/albums-page.module').then(
        (m) => m.AlbumsPageModule,
      ),
  },
  {
    path: 'beats',
    loadChildren: () =>
      import('./pages/beats-page/beats-page.module').then(
        (m) => m.BeatsPageModule,
      ),
    data: { title: 'Beats' },
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: TitleStrategy, useClass: TemplatePageTitleStrategy }],
})
export class AppRoutingModule {}

Comments

[Speakermen]

Не работает(
Setting Page Titles Natively With The Angular Router

[Speakermen]

Эх я просто не обновился до 14

Всё работает

import { Title } from '@angular/platform-browser';
import { Injectable, NgModule } from '@angular/core';
import {
  RouterModule,
  RouterStateSnapshot,
  Routes,
  TitleStrategy,
} from '@angular/router';

@Injectable({ providedIn: 'root' })
export class TemplatePageTitleStrategy extends TitleStrategy {
  constructor(private readonly title: Title) {
    super();
  }

  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      this.title.setTitle(`Lil Fil - ${title}`);
    }
  }
}

const routes: Routes = [
  {
    path: '',
    title: 'Home',
    loadChildren: () =>
      import('./pages/home-page/home-page.module').then(
        (m) => m.HomePageModule,
      ),
  },
  {
    path: 'albums',
    title: 'Albums',
    loadChildren: () =>
      import('./pages/albums-page/albums-page.module').then(
        (m) => m.AlbumsPageModule,
      ),
  },
  {
    path: 'beats',
    title: 'Beats',
    loadChildren: () =>
      import('./pages/beats-page/beats-page.module').then(
        (m) => m.BeatsPageModule,
      ),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{provide: TitleStrategy, useClass: TemplatePageTitleStrategy},],
})
export class AppRoutingModule {}

import { AlbumsService } from './../../services/albums.service';
import { AlbumsInterface } from './../../interfaces/albums.interface';
import { Component, OnInit, Type } from '@angular/core';
import { ActivatedRoute, Resolve } from '@angular/router';

@Component({
  selector: 'page-albums',
  templateUrl: './albums.page.html',
  styleUrls: ['./albums.page.css'],
})
export class AlbumsPage implements OnInit {
  public albums!: AlbumsInterface[];
  public title?: string | Type<Resolve<string>>;

  public constructor(
    private readonly route: ActivatedRoute,
    private readonly albumsService: AlbumsService,
  ) {}

  public ngOnInit(): void {
    this.title = this.route.parent?.routeConfig?.title;
    this.albumsService
      .findAll()
      .subscribe((data: AlbumsInterface[]) => (this.albums = data));
  }
}