Блог

Я пытаюсь изучить angular, поэтому я только что закончил учебник по heroes.

Затем я подумал, что хотел бы взглянуть на изменение этого, чтобы я мог изменить заголовок документа на странице. Итак, я следовал инструкциям, чтобы добавить службу заголовка.

Это отлично работает на моей странице панели мониторинга, где я могу просто вызвать службу заголовков при инициализации, поэтому я подумал, что попробую добавить ее на страницу сведений о моем герое, чтобы посмотреть, смогу ли я сделать заголовок документа именем героев:

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

Как вы можете видеть из моего кода, я пытаюсь установить заголовок после выполнения обещания для настройки героя. Однако, похоже, ничего не происходит — ошибка не выдается, и заголовок не меняется.

Что я здесь делаю не так? Разве я не связал бы обещание таким образом?

Изменить

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

Для

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

чтобы сохранить область this

Смотрите также https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions