Question

我正在尝试将此示例（https://angular.io/guide/set-document-title）改编为我的实现，其中包含更多部分。我还没有完全理解所有角形2件是什么以及它们如何组合在一起。

他们的主要内容：

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：

路线：

INSERT INTO dbname.tablename 
PARTITION(year_month) 
SELECT * from Spark_temp_table
DISTRIBUTE BY year, month, day % 3

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

进口：

... 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';

ngOnInit（）方法：

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

    }

希望有帮助。

实现角度2集标题标签

1 个答案: