Angular 2: не удается найти ngOnInit/ngOnDestroy

ПРИМЕЧАНИЕ. Я обнаружил, что статья не может найти OnInit в машинописном тексте во время реализации, но приведенный ниже код уже импортирует OnInit/OnDestroy.

Все примеры, которые я нашел (например, Использование параметров маршрута) указывают на добавление предложения implements OnInit/OnDestroy в определение класса и включение методов ngOnInit/ngOnDestroy при подписке на получение параметра из маршрута, что и делает код.

Однако VS2017 сообщает об ошибке «неправильно реализует OnInit/OnDestroy» для предложения и сообщает об ошибке «Не удается найти ngOnInit/ngOnDestroy» для функций.

Если я удалю предложение implements и прокомментирую функции ngOnInit/ngOnDestroy (оставив только код в теле ngOnInit), код будет работать; он успешно получает параметр из параметров маршрута.

import { Component, Inject, OnInit, OnDestroy } from '@angular/core';
import { Http } from '@angular/http';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'submission',
    templateUrl: './submission.component.html'
})
export class SubmissionComponent implements OnInit, OnDestroy {
    private baseUrl: string;
    private http: Http;
    private route: ActivatedRoute;
    private sub: any;

    public caseId: string;
    public submission: Submission;

    constructor(http: Http, route: ActivatedRoute, @Inject('BASE_URL') baseUrl: string) {
        this.http = http;
        this.route = route;
        this.baseUrl = baseUrl;

        ngOnInit() {
            this.sub = this.route.params.subscribe(params => {
                this.caseId = params['caseId'];

                // In a real app: dispatch action to load the details here.
            });
        }

        ngOnDestroy() {
            this.sub.unsubscribe();
        }

        this.get(this.caseId);
    }

    public get(caseId: string) {
        var url = this.baseUrl + 'api/Submission/GetSubmission?caseId=' + caseId;
        this.http.get(url).subscribe(result => {
            this.submission = result.json() as Submission;
        }, error => console.error(error));
    }

    public put() {
        var url = this.baseUrl + 'api/Submission/PutSubmission';
        this.http.put(url, this.submission).subscribe(result => {
            this.submission = result.json() as Submission;
        }, error => console.error(error));
    }
}

angular ngoninit ngondestroy implements
person IronRod    schedule 03.07.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Методы ngOnInit и ngOnDestroy должны быть вне конструктора. Как это:

// imports ...

@Component({
  // ...
})
export class SubmissionComponent implements OnInit, OnDestroy {
  // ...

  constructor( /* ... */ ) {
    // ...
  }

  ngOnInit() {
    // ...
  }

  ngOnDestroy() {
    // ...
  }
}
person lealceldeiro    schedule 03.07.2018

arrow_upward
2
arrow_downward

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

Пример кода:

constructor(http: Http, route: ActivatedRoute, @Inject('BASE_URL') baseUrl: string) {
    this.http = http;
    this.route = route;
    this.baseUrl = baseUrl;
}

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.caseId = params['caseId'];

      this.get(this.caseId);

      // In a real app: dispatch action to load the details here.
    });
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

Как правило, при добавлении ngOnInit и ngOnDestroy вы всегда должны проверять следующие шаги:

  1. Убедитесь, что вы импортировали OnInit и OnDestroy из angular/core.
  2. Затем добавьте их в класс

  3. Добавьте эти функции

    import { OnInit, OnDestroy } from '@angular/core';
export class ComponentComponent implements OnInit, OnDestroy {
  ngOnInit(){}

  ngOnDestroy(){}
}
person Andrey Seregin    schedule 03.07.2018