角度2：找不到ngOnInit / ngOnDestroy

Question

注意：我发现本文在实现期间无法在打字稿中找到OnInit，但是下面的代码已经导入了OnInit/ OnDestroy。

我发现的所有示例（例如，使用Route Parameters）都指示在类定义中添加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));
    }
}

Answer 1

方法ngOnInit和ngOnDestroy应该在构造函数之外。像这样：

// imports ...

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

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

  ngOnInit() {
    // ...
  }

  ngOnDestroy() {
    // ...
  }
}