Angular - 定义自定义 TitleStrategy 来实现路由器标题属性的 ngx 翻译

Question

我正在 Angular V16 中开发一个多语言应用程序。我正在使用 ngx-translate 库。

我想为路由器中定义的各个路由实现多语言标题。为此，我一直遵循此博文中的步骤https://itnext.io/manage-angular-page-titles-translation-d1384bbede86

关键的区别在于，在我的应用程序中，我在延迟加载模块内实现此功能。

由于某种原因，下面提到的解决方案不起作用。我没有收到任何错误。浏览器选项卡内的标题等于 ngx-translate 库的键，该键在路由定义中的“title”属性中提供。

根据CustomTitleStrategy内的console.log语句，根本没有创建CustomTitleStrategy的实例。但是定义 CustomTitleStrategy 的文件的导入已完成，因为我在浏览器控制台中看到字符串“导入了类”。

我尝试扩展 DefaultTitleStrategy 而不是 TItleStrategy，但没有成功。

这是代码：

1. 自定义标题策略.ts

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

console.log('Imported the class'); // the only console log which is printed into the console.
@Injectable({providedIn: 'root'})
export class CustomTitleStrategy extends TitleStrategy {
    constructor(
        private translateService: TranslateService,
        private readonly title: Title
    ) {
        super();
        console.log('Inside constructor');
    }

    updateTitle(routerState: RouterStateSnapshot): void {
        const title = this.buildTitle(routerState);
        console.log('Inside custom title strategy');
        if (title) {
            const translatedTitle = this.translateService.instant(title);
            this.title.setTitle(translatedTitle);
        } else {
            this.title.setTitle('App');
        }
    }
}

2. 子模块.module.ts

...
import { TitleStrategy } from '@angular/router';
import { CustomTitleStrategy } from '../shared/services/international-page-title-strategy';
...

@NgModule({
    providers: [
        {
            provide: TitleStrategy,
            useClass: CustomTitleStrategy,
        },
    ],
    declarations: [
...
]

3. 子模块路由.module.ts

...

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent,
                title: 'titles.dashboard',
            },{
                path: 'user/',
                component: UserDetailsComponent,
                title: 'titles.user',
            },
...

4. 翻译文件（这里只是en.json，其他语言的结构相同）

...
"titles": {
            "dashboard": "Dashboard",
            "user": "User",
...

这是我的 package.json 的摘录

"@angular/animations": "16.2.6",
"@angular/cdk": "16.2.4",
"@angular/common": "16.2.6",
"@angular/compiler": "16.2.6",
"@angular/core": "16.2.6",
"@angular/forms": "16.2.6",
"@angular/localize": "16.2.6",
"@angular/material": "^16.2.4",
"@angular/platform-browser": "16.2.6",
"@angular/platform-browser-dynamic": "16.2.6",
"@angular/router": "16.2.6",
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "7.0.0",

提前感谢您的任何反馈。

Answer 1

此代码有效；你可以尝试一下。不过，标题没必要是只读的

自定义标题策略

@Injectable({providedIn: 'root'})

export class CustomTitleStrategy extends TitleStrategy {

constructor(private title: Title, private translate:TranslateService) {
    super();
}

updateTitle(routerSnapshot: RouterStateSnapshot) {
    const title = this.buildTitle(routerSnapshot);

    if (title) {
        const translatedTitle = this.translate.instant('titles.site-name') + ' | ' + this.translate.instant(`titles.${title}`);
        this.title.setTitle(translatedTitle);
    } else {
        const translatedTitle = this.translate.instant('titles.site-name');
        this.title.setTitle(translatedTitle);
    }
}

}

在 Angular 中，定义一个提供程序来覆盖默认的 TitleStrategy。通过在提供程序配置中使用 Provide 和 useClass 属性指定它，使用 CustomTitleStrategy 作为实现

export class CoreModule {
   
    static forRoot(): ModuleWithProviders<CoreModule> {
        return {
            ngModule: CoreModule,
            providers: [
                {
                    provide: TitleStrategy,
                    useClass: CustomTitleStrategy,
                },
            ]
        };
    }
}

语言 json

"titles": {
     "site-name": "stackoverflow",
     "other": "Other Code"
}