0

注: この記事では、実装中に typescript で OnInit が見つからないことがわかりましたが、以下のコードは既にOnInit/をインポートしていOnDestroyます。

私が見つけたすべての例 (例: Using Route Parametersimplements OnInit ) は、 /OnDestroy句をクラス定義に追加し、ルートからパラメーターを取得するためにサブスクライブするときにngOnInit/メソッドを含めることを示しています。コードはこれを行っています。ngOnDestroy

ただし、VS2017 では、句に対して「OnInit/OnDestroy が正しく実装されていません」というエラーが報告され、関数に対して「ngOnInit/ngOnDestroy が見つかりません」というエラーが報告されます。

句を削除して/関数implementsをコメント化すると (本体のコードのみを残して)、コードは機能します。ルート パラメーターからパラメーターを正常に取得します。ngOnInitngOnDestroyngOnInit

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

2 に答える 2

5

メソッドngOnInitとngOnDestroyコンストラクターの外にある必要があります。このような：

// imports ...

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

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

  ngOnInit() {
    // ...
  }

  ngOnDestroy() {
    // ...
  }
}
于 2018-07-03T15:49:32.493 に答える
2

あなたのコードから 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. 「angular/core」から OnInit と OnDestroy をインポートしたことを確認します
  2. 次に、それらをクラスに追加します

  3. これらの機能を追加

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

  ngOnDestroy(){}
}
于 2018-07-03T15:51:47.640 に答える