Javascript 动态更改angular 2中的标题字符串

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

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

{{title}

我希望它根据我所在的页面而改变。现在页眉是固定的，所以它在每一页上

下面是一幅我试图改变的图片

基本上，如果我在主页上，我希望它说主页，然后如果我在关于页面上，我希望它改为关于

---

我不知道该怎么做，我所研究的一切都是更改

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

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

//headerTitle.service.ts
@可注射（）
出口班主任服务{
标题=新行为主体（“初始标题”）；
setTitle（标题：字符串）{
这个。标题。下一个（标题）；
}
}
//header.component.ts
标题=''；
构造函数（私有headerTitleService:headerTitleService）{}
恩戈尼尼特（）{
this.headerTitleService.title.subscribe（updateditle=>{
this.title=更新的标题；
});
}
//header.component.html
{{title}}
//关于.component.ts
构造函数（私有headerTitleService:headerTitleService）{}
恩戈尼尼特（）{
this.headerTitleService.setTitle（'About'）；
}

---

使用浏览器平台中的标题服务动态更改标题

app.module.ts

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

app.component.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 );
  }
}

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


早上好
下午好
晚上好

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

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

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

 public title:string = 'About me';

在HTML中，只需：

{{title}}

更新：

由于它将绑定到一个常量标题组件，因此您必须使用

EventEmitter

从每个组件发出一个事件，并在应用程序中的多个组件中侦听该事件，并相应地更新title属性

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

  ];

---

正如Aamir在评论中所建议的那样：您可以拥有一个服务，您可以在其中创建一个可观察的，然后在每个组件中更新其

next

值。然后可在

标题

组件中订阅可观察内容，以更新

标题

属性。

使用@angular/platform浏览器中的标题服务，并添加具有数据属性的路由器组件

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

  ];

在根组件中调用此函数

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

---

您可以通过订阅

路由器事件来实现这一点，如下所示

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

关于这个问题，我已经写了一个完整的教程-
你是在谈论选项卡标题（
），还是这是你的应用程序特有的东西？在我的标题组件中，我希望能够有一个
{title}
和
title
是页面的标题，取决于Im所在的页面，因此如果Im位于关于页面上，我希望h1与关于页面的
类似，如果它只是应用程序中的一个字符串。您所需要的只是将它绑定到头中的组件propertyIts，因此我希望能够动态更改它，因为头是常量，而页面更改在我的头组件中，我希望能够有一个
{{title}
和
标题
是页面的标题，取决于Im所在的页面，因此如果Im在关于页面上，我希望h1类似于关于页面
我遇到一个错误
找不到名称“BehaviorSubject”。
我如何订阅BehaviorSubject？您必须导入它
导入{BehaviorSubject}来自“rxjs/subject/BehaviorSubject”正常工作，但总是抛出错误：
错误：“ExpressionChangedTerithasBeenCheckedError:表达式在检查后已更改。
-知道如何解决此问题吗？请勿在angular中使用
EventEmitter
，除非与@Output一起使用，用于子组件和父组件之间的事件绑定。不要订阅它。我同意。但我认为OP试图实现的具体情况需要各种组件的发射，这些组件将绑定到标题组件中的
@Input title
，我认为最好使用服务和rxjs。是的。可能是更好的方法。这会更改浏览器标题。他想要html格式的。