Angular - 定义自定义 TitleStrategy 以实现路由器标题属性的 ngx-translation

问：

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

我想为路由器中定义的单个路由实现多语言标题。为此，我一直在按照这篇博文中的步骤进行操作 https://itnext.io/manage-angular-page-titles-translation-d1384bbede86

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

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

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

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

代码如下：

1. CustomTitleStrategy.ts（自定义标题策略.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. 子模块-routing.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",

提前感谢您的任何反馈。