Question

根据页面获取标题文本的最佳方法是什么？我目前正在根据router.url改变颜色的单个标头工作（请参阅上一个问题here），我想动态更改页眉文本。

我觉得逻辑也应该是相似的，如果我也想基于页面添加图像。

起初我想过迭代一系列标题，但最终只打印了所有页面上的所有标题。然后我想创建一个函数，检查将检查链接并返回相应的标题，但我不知道如何插入它...

app.component.html

   <!-- <div class="set-margin page-title"><h1 *ngFor="let pageTitle of pageTitles">{{ pageTitle.title }}</h1></div> -->
   <div class="set-margin page-title">
     <!-- <h1 *ngFor="let pageTitle of pageTitles">{{ pageTitle.title }}</h1> -->
     <h1>{{ getHeaderText() }}</h1>

  </div>

app.component.ts

export class AppComponent {
activatedRoute = '';
title: string;

  pageTitles = [
    { 'title': 'About'},
    { 'title': 'Resources'},
    { 'title': 'News' },
    { 'title': 'Contact' }
  ];
  activateRoute(activatedRoute: string) {
    this.activatedRoute = activatedRoute;
  }

  getHeaderText() {
      if (this.activatedRoute.includes('about')) {
        this.title = 'About';
          return this.title;
      } else if (this.activatedRoute.includes('resources')) {
          this.title = 'Resources';
          return this.title;
      } else if (this.activatedRoute.includes('newsroom')) {
          this.title = 'News';
          return this.title;
      } else {
        this.title = 'Contact';
          return this.title;
    }
  }

  constructor(private router: Router) {}
}

Answer 1

您不需要title或pageTitles。创建getter属性以获取活动页面标题。

将您的组件html更改为：

<div class="set-margin page-title">
    <h1>{{ headerTitle }}</h1>
</div>

...并在您的组件类中：

export class AppComponent {
  activatedRoute = '';

  activateRoute(activatedRoute: string) {
    this.activatedRoute = activatedRoute;
  }

  get headerTitle {
      if (this.activatedRoute.includes('about')) {
        return 'About';
      } else if (this.activatedRoute.includes('resources')) {
        return 'Resources';
      } else if (this.activatedRoute.includes('newsroom')) {
        return 'News';
      } else {
        return 'Contact';
      }
    }

  constructor(private router: Router) {}
}

Answer 2

您可以通过路由器将这些标题作为数据传递，这看起来像这样

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Data } from '@angular/router';

app.component.ts

首先，请务必在顶部添加这些导入

AppComponent

然后你需要从路由器获取这些数据。您的export class AppComponent implements OnInit { pageTitle = 'default page title'; constructor(private route: ActivatedRoute) {} ngOnInit() { this.route.data.subscribe( (data: Data) => { this.pageTitle = data['title']; } ); } }可能看起来像这样

{{ pageTitle }}

然后在app.component.html上显示数据

app.component.html

auth()->login()

基于路由器URL（Angular4）将标头绑定到文本

2 个答案:

app.component.ts

app.component.html