Question

在我的应用程序中我试图根据我所在的页面动态更改标题组件中的标题，因此在我的标题组件中我想使用

<h1>{{title}}</h1>

我希望它根据我所在的页面进行更改。现在标题是固定的，所以它在每一页

下面是我试图更改

的图片

基本上如果我在主页上我希望它说回家然后如果我在一个关于页面我希望它改为约...

我不确定如何解决这个问题，我研究的所有内容都是更改<head></head>代码中的标题

Answer 1

您可以创建专用于更新标题组件中标题的服务。只需在头部组件中注入服务并订阅专用的BehaviorSubject即可。然后，您可以在您拥有的任何组件中注入此服务，并使用该组件中的setTitle方法，该方法将更新标头组件中的标题。查看以下代码

//headerTitle.service.ts
@Injectable()
export class headerTitleService {
  title = new BehaviorSubject('Initial Title');

  setTitle(title: string) {
    this.title.next(title);
  }
}

//header.component.ts
title = '';

constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.title.subscribe(updatedTitle => {
    this.title = updatedTitle;
  });
}

//header.component.html
<h1>{{title}}</h1>

//about.component.ts
constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.setTitle('About');
}

Working demo

Answer 2

Use the title service in @angular/platform-browser and add router component with data property.

const appRoutes: Routes = [
  { path: 'home',component:HomeComponent , data:{title:'Home'}}

  ];

Call this function in the root component

ngOnInit() {
    this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => this.titleService.setTitle(event['title']));
  }
}

Answer 3

在浏览器平台中使用标题服务动态更改标题。 refer this link for more information

app.module.ts

// Import the native Angular services.
import { Component } from '@angular/core';
import { Title }     from '@angular/platform-browser';

@Component({
selector: 'app-root',
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 );
  }
}

app.component.ts

using System;
using System.Linq;

public class Program
{
    public static void Main()
    {
        var inputs = new string[] 
        {
            "77715926535897932384626433832795",
            "8",
            "2398798734",
            "0092",
            "12987981239871928379817231",
            "98279384792873498274908123946109478276492874927864928734872983476928739487298374"
        };

        //Determine the length of the longest number when expressed as a string
        var maxLength = inputs.Select(a => a.Length).Max();

        //Pad all the numbers to the left with zeroes
        var padded = inputs.Select(a => a.PadLeft(maxLength, '0'));

        //Now sort them
        var sorted = padded.OrderBy(a => a);

        foreach (var s in sorted)
        {
            Console.WriteLine(s);
        }
    }
}

Answer 4

您可以按照以下步骤订阅Router events来达到此目的

private setTitleFromRouteData(routeData) {
    if (routeData && routeData['title']) {
        this.pageTitle = routeData['title'];
    } else {
        this.pageTitle = 'No title';
    }
}

private getLatestChild(route) {
    while (route.firstChild) {
        route = route.firstChild;
    }
    return route;
}

private subscribeToRouteChangeEvents() {
    // Set initial title
    const latestRoute = this.getLatestChild(this.activeRoute);
    if (latestRoute) {
        this.setTitleFromRouteData(latestRoute.data.getValue());
    }
    this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => this.activeRoute),
        map((route) => this.getLatestChild(route)),
        filter((route) => route.outlet === 'primary'),
        mergeMap((route) => route.data),
    ).subscribe((event) => {
        this.setTitleFromRouteData(event);
    });
}

我已经写了一个完整的教程-https://medium.com/@CROSP/page-specific-dynamic-angular-components-using-child-routes-40f3cc47ce10

Answer 5

根据OP的要求，似乎OP需要将字符串属性绑定到页面。

在您的组件中有一个属性。由于它是一个修复字符串，您可以在每个组件上初始化它，如：

 public title:string = 'About me';

并在您的HTML中：

<h1>{{title}}</h1>

更新

由于它要绑定到常量标头组件，因此您必须使用emit从每个组件EventEmitter发送一个事件，并在应用中的多个组件中收听它并相应地更新标题属性。

正如Aamir在评论中所建议的那样：您可以拥有一项服务，其中您可以创建一个Observable，然后在每个组件中更新其next值。然后可以在header组件中订阅observable以更新title属性。

以角度2

5 个答案: