实现 Angular 2 设置标题标签

Question

我正在尝试使这个示例 (https://angular.io/guide/set-document-title) 适应我的实现，它有更多的部分。我还没有完全理解所有有角度的 2 部分是什么以及它们如何组合在一起。

他们的 main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

我的：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
    enableProdMode();
} 

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

到目前为止还可以。

他们的 app.module：

import { NgModule } from '@angular/core';
import { BrowserModule, Title }  from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        Title
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

我的：

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER  } from '@angular/core';

import { serviceConfigFactory, AppConfig } from './app.config';
... about 50 other imports
import { AppRoutingModule } from './app-routing.module';


export function HttpLoaderFactory(http: Http, siteService:SiteService) {
    return new LocalizationLoader(http,siteService);
}

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    BaseLoginComponent,
    ClientSwitchComponent,
    SwitchClientComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JWBootstrapSwitchModule,
    DatepickerModule.forRoot(),
    TypeaheadModule.forRoot(),
    MomentModule,
    SharedModule,
    AuthModule,
    CompanyModule,
    RequestTimeOffModule,
    AppRoutingModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [Http, SiteService]
        }
    }),
    StoreModule.provideStore({ appState: appStateReducer }),
  ],
  providers: [
    { provide: AppConfig, useFactory: serviceConfigFactory },
    SiteService,
    AppContext,
    { provide: APP_INITIALIZER, useFactory: AppContextLoader, deps: [AppContext], multi: true },
    EmployeeService,
    LeavesService,
    ServiceManager,
    EncryptionService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这就是我遇到麻烦的地方：

他们的 app.component.ts：

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

@Component({
selector: 'my-app',
template:
  `<p>
    Select a title to set on the current HTML document:
  </p>

  <ul>
    <li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
    <li><a (click)="setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
    <li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
  </ul>
  `
})
export class AppComponent {
  public constructor(private titleService: Title ) { }

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
}

我的：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { AppContext } from './services/app.context';
import {AuthService} from './services/auth/auth.service';
import { CompanyRoutes } from './features/company/company.routes';
import { Router, NavigationEnd } from '@angular/router';
import { Title } from '@angular/platform-browser';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})


export class AppComponent {
    constructor(public router: Router, public auth: AuthService, public appContext: AppContext, translate: TranslateService, private companyRoutes: CompanyRoutes, private titleService: Title) {
        if (appContext.siteConfig.clientCode) {
            this.companyRoutes.resetCompanyRoutes(appContext.siteConfig.clientCode);
        }
    }

    public setTitle(newTitle: string) {
        this.titleService.setTitle(newTitle);
    }
}

现在，我不希望它在 app.component .ts 上执行 setTitle；我想在它到达第一页时立即执行此操作（然后是每个后续页面，所以这是我期望做的：

我的 login.component.ts：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { SiteService } from '../../../services/site.service';
import { AppContext } from '../../../services/app.context';
import { LoginConfig, AppState } from '../../../models/site/site.config';
import {AuthService} from '../../../services/auth/auth.service';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
})
export class BaseLoginComponent implements OnInit {

    ngOnInit() {

        this.setTitle("!");
    }
}

login.component.ts 无法识别 this.setTitle() 或 setTitle();

我不太了解这些 app.component 和 app.module 字段的用途，以及它们如何连接在一起，所以我不确定如何将 setTitle 公开到我的页面。

Answer 1

以下是我项目中用于更新标题和元标记的相关部分。 （角度 2/4）

---

app-routing.module.ts：

路线：

... const appRoutes: Routes = [
    {
        path: 'path1', loadChildren: './path1#path1Module',
        data: {
            title: '...',
            description: '...',
            keywords: '...'
        }
    },
    {
        path: 'path2', loadChildren: './path2#path2Module',
        data: {
            title: '...',
            description: '...',
            keywords: '...'
        }
    } ...

app.component.ts（或您的引导组件）：

进口：

// imports
import { Component, OnInit} from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import { Title,Meta } from '@angular/platform-browser';

构造函数：

    // constructor:
        constructor(private router: Router,
                    private route: ActivatedRoute,
                    private titleService: Title, private meta: Meta) {}

ngOnInit() 方法：

ngOnInit() {

        this.router.events
            .filter((event) => event instanceof NavigationEnd)
            .map(() => this.route)
            .map((route) => {
                while (route.firstChild) route = route.firstChild;
                return route;
            })
            .filter((route) => route.outlet === 'primary')
            .mergeMap((route) => route.data)
            .subscribe((event) => {
                this.updateDescription(event['description'], event['keywords'], event['title']);
            });

    }

更新标题和元标记的方法 -> 从 ngOnInit() 调用：

updateDescription(desc: string, keywords: string, title: string) {
    this.titleService.setTitle(title);
    this.meta.updateTag({ name: 'description', content: desc })
    this.meta.updateTag({ name: 'keywords', content: keywords })
    this.meta.updateTag({ name: 'og:title', content: title })
    this.meta.updateTag({ name: 'og:description', content: desc })
}

希望对您有所帮助。