@Speakermen

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

В доках есть 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 {}
  • Вопрос задан
  • 37 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы