Реализация абстрактного метода в компоненте имеет неопределенные зависимости - PullRequest
0 голосов
/ 01 декабря 2018

Абстрактный класс:

export abstract class LanguageChangeAware {

    private sub: Subscription;
    protected language: string;

    protected constructor(protected eventService: EventService) {
        this.sub = eventService.getLang().subscribe(lang => {
            this.language = lang;
            this.load();
        });

        this.load();
    }

    protected ngOnDestroy(): void {
        this.sub.unsubscribe();
    }

    protected abstract load();
}

Компонент NewsPage реализует LanguageChangeAware абстрактный класс:

export class NewsPage extends LanguageChangeAware {

    public news: Array<NewsItem>;

    constructor(public newsService: NewsService, protected eventService: EventService) {
        super(eventService);
    }

    protected load() {
        console.log('NewsPage - load() - ', this.newsService); // <- undefined

        this.newsService.getNewsItemsList().then(data => {
            this.news = data;
        });
    }
}

Моя проблема заключается в том, что в load() реализации NewsPageкомпонент, внедренная зависимость NewsService не определена.


Одним из возможных решений, предложенных пользователем Антуаном Буазье-Мишо, было создание подписки внутри метода ngOnInit.

Обновленная версия LanguageChangeAware:

export abstract class LanguageChangeAware implements OnInit, OnDestroy {

    private sub: Subscription;
    protected language: string;

    protected constructor(protected eventService: EventService) {
    }

    public ngOnInit(): void {
        this.sub = this.eventService.getLang().subscribe(lang => {
            this.language = lang;
            this.load();
        });

        this.load();
    }

    public ngOnDestroy(): void {
        this.sub.unsubscribe();
    }

    protected abstract load();

}

1 Ответ

0 голосов
/ 01 декабря 2018

Конструктор должен использоваться для инициализации членов класса и для внедрения зависимостей.Если у вас есть что-то, что нужно сделать для инициализации, вы должны использовать метод ngOnInit.Когда вызывается ngOnInit, вы знаете, что все зависимости были разрешены.

export abstract class LanguageChangeAware implements OnInit {

    private sub: Subscription;
    protected language: string;

    constructor(protected eventService: EventService) { }

    protected ngOnInit(): void {
        this.sub = eventService.getLang().subscribe(lang => {
            this.language = lang;
            this.load();
        });

        this.load();
    }

    protected ngOnDestroy(): void {
        this.sub.unsubscribe();
    }

    protected abstract load();
}

Вы можете прочитать документацию angular по жизненным циклам , если хотите узнать больше об OnInit и других хуках жизненного цикла.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...