Titel nach eckigem Versprechen setzen

Question

Ich versuche, eckig zu lernen, also habe ich gerade die heroes tutorial beendet.

Ich dachte dann, ich würde schauen, um dies zu ändern, so dass ich den Dokumenttitel pro Seite ändern könnte. Also folgte ich den Anweisungen, um die title service hinzuzufügen.

Das funktioniert alles gut und gut auf meiner Dashboard-Seite, wo ich einfach den Titeldienst in der On-Init aufrufen kann, also dachte ich, ich würde versuchen, es zu meiner Helden Details Seite hinzufügen, um zu sehen, ob ich den Dokumenttitel machen könnte die Helden nennen:

import { Component, Input, OnInit } from '@angular/core'; 
import { Title }     from '@angular/platform-browser'; 
import { ActivatedRoute, Params } from '@angular/router'; 
import { Location }     from '@angular/common'; 

import { Hero }      from '../classes/hero'; 
import { HeroService }    from '../services/hero.service'; 

@Component({ 
    selector: 'my-hero-details', 
    templateUrl: '/app/templates/hero-details.component.template.html' 
}) 

export class HeroDetailsComponent implements OnInit { 
    @Input() 
    hero: Hero; 

    constructor(
     private heroService: HeroService, 
     private route: ActivatedRoute, 
     private location: Location, 
     private titleService: Title 
    ) { } 

    public ngOnInit(): void { 
     this.route.params.forEach((params: Params) => { 
      let id = +params['id']; 

      this.heroService.getHero(id) 
       .then(hero => this.hero = hero) 
       .then(function() { this.setTitle(this.hero.name); }); // this is the line I have added 
     }); 
    } 

    public save(): void { 
     this.heroService.update(this.hero) 
      .then(() => this.goBack()); 
    } 

    public delete(): void { 
     this.heroService 
      .delete(this.hero.id) 
      .then(() => this.goBack()); 
    } 

    public goBack(): void { 
     console.log('back') 
     this.location.back(); 
    } 

    private setTitle(newTitle: string) { 
     this.titleService.setTitle(newTitle); 
    } 
} 

Wie Sie aus meinem Code sehen können, ich versuche, den Titel zu setzen, nachdem das Versprechen den Helden für die Einstellung ausgeführt wird. Es scheint jedoch nichts zu passieren - es wird kein Fehler ausgelöst und der Titel ändert sich nicht.

Was mache ich hier falsch? Würde ich das Versprechen nicht so verketten?

Answer 1

ändern

.then(function() { this.setTitle(this.hero.name); }); 

zu

.then(() => { this.setTitle(this.hero.name); }); 

den Umfang der this

Siehe https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions auch behalten