Angular 实现角度2集标题标记

我正在尝试将这个示例（）改编为我的实现，它包含了更多的部分。我还没有完全理解所有的棱角2件是什么，以及它们是如何装配在一起的

他们的主要目标是：

从'@angular/platformBrowserDynamic'导入{platformBrowserDynamic}；
从“./app/app.module”导入{AppModule}；
platformBrowserDynamic（）.bootstrapModule（AppModule）；

地雷：

从'@angular/core'导入{enableProdMode}；
从“@angular/platformBrowserDynamic”导入{platformBrowserDynamic}；
从“./app/app.module”导入{AppModule}；
从“./environments/environment”导入{environment}；
if（环境、生产）{
enableProdMode（）；
} 
const platform=platformBrowserDynamic（）；
bootstrapModule（AppModule）；

好的，到目前为止

他们的app.module：

从'@angular/core'导入{NgModule}；
从“@angular/platform browser”导入{BrowserModule，Title}”；
从“./app.component”导入{AppComponent}；
@NGD模块({
进口：[
浏览器模块
],
声明：[
应用组件
],
供应商：[
标题
],
引导：[AppComponent]
})
导出类AppModule{}

地雷：

从'@angular/platform browser'导入{BrowserModule，Title}；
从“@angular/core”导入{NgModule，APP_初始值设定项}；
从“/app.config”导入{serviceConfigFactory，AppConfig}；
... 大约50种其他进口产品
从“./app routing.module”导入{AppRoutingModule}；
导出函数HttpLoaderFactory（http:http，siteService:siteService）{
返回新的本地化加载程序（http、siteService）；
}
@NGD模块({
声明：[
应用组件，
HomeComponent，
LoginComponent，
BaseLoginComponent，
ClientSwitchComponent，
SwitchClientComponent
],
进口：[
浏览器模块，
FormsModule，
HttpModule，
JWBootstrapSwitchModule，
DatepickerModule.forRoot（），
TypeaheadModule.forRoot（），
动量模块，
共享模块，
AuthModule，
公司模块，
RequestTimeOff模块，
批准模块，
TranslateModule.forRoot({
加载器：{
提供：TranslateLoader，
使用工厂：HttpLoaderFactory，
deps:[Http，SiteService]
}
}),
provideStore（{appState:appStateReducer}），
],
供应商：[
{提供：AppConfig，使用工厂：serviceConfigFactory}，
网站服务，
AppContext，
{提供：APP_初始值设定项，useFactory:AppContextLoader，deps:[AppContext]，multi:true}，
雇员服务，
离开服务，
服务经理，
加密服务
],
引导：[AppComponent]
})
导出类AppModule{}

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

他们的app.component.ts：

从'@angular/core'导入{Component}；
从“@angular/platform browser”导入{Title}；
@组成部分({
选择器：“我的应用程序”，
模板：
`
选择要在当前HTML文档上设置的标题：


早上好
下午好
晚上好

`
})
导出类AppComponent{
公共构造函数（私有titleService:Title）{}
公共setTitle（newTitle:string）{
this.titleService.setTitle（newTitle）；
}
}

地雷：

从'@angular/core'导入{Component}；
从'@ngx translate/core'导入{TranslateService}；
从“./services/app.context”导入{AppContext}；
从“./services/auth/auth.service”导入{AuthService}；
从“./features/company/company.routes”导入{CompanyRoutes}；
从'@angular/Router'导入{Router，NavigationEnd}；
从“@angular/platform browser”导入{Title}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']
})
导出类AppComponent{
构造函数（公共路由器：路由器，公共身份验证：AuthService，公共appContext:appContext，translate:TranslateService，私有公司地址：公司地址，私有标题服务：标题）{
if（appContext.siteConfig.clientCode）{
this.companyRoutes.resetCompanyRoutes（appContext.siteConfig.clientCode）；
}
}
公共setTitle（newTitle:string）{
this.titleService.setTitle（newTitle）；
}
}

现在，我不希望它在app.component.ts上执行setTitle；我希望在它到达第一页（以及随后的每一页）时立即执行此操作，因此这就是我希望执行的操作：

我的login.component.ts：

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{ActivatedRoute，Router}；
从“rxjs”导入{Observable}；
从“../../../services/site.service”导入{SiteService}；
从“../../../services/app.context”导入{AppContext}；
从“../../../models/site/site.config”导入{LoginConfig，AppState}；
从“../../../services/auth/auth.service”导入{AuthService}；
@组成部分({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.scss']
})
导出类BaseLoginComponent实现OnInit{
恩戈尼尼特（）{
此.setTitle（“！”）；
}
}

login.component.ts无法识别

this.setTitle（）

或

setTitle（）；

---

我真的不明白这些

app.component

和

app.module

字段的用途，以及它们是如何连接在一起的，所以我不知道如何将

setTitle

公开到我的页面上。

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

---

应用程序路由.module.ts:

路线：

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

进口：

建造商：

ngOnInit（）方法：

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

希望能有所帮助。

您离开了setTitle（newTitle:s）

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

// 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() {

        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']);
            });

    }

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 })
}