代码之家 › 专栏 › 技术社区 › AdvApp

角度2:找不到ngoninit/ngondestory

ngoninit implements angular

1

AdvApp · 技术社区 · 8 年前

注:我找到了那篇文章 cannot find OnInit in typescript during implementation 但是下面的代码已经在导入onit/ondestory。

我找到的所有例子(例如, Using Route Parameters )指示将“implements oninit,ondestroy”子句添加到类定义中,并在订阅从路由获取参数时包含ngoninit/ngondestroy方法,代码正在执行此操作。

但是,VS2017报告了该子句的错误“incorrectly implements oninit/ondestory”,并报告了函数的错误“cannot find ngoninit/ngondestory”。

如果我删除'implements'子句并注释ngoninit/ngondestory函数(只将代码留在ngoninit的主体中),代码就会工作;它会成功地从route参数中获取参数。

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

2 回复 | 直到 8 年前

1

4

lealceldeiro VonC 8 年前

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

// imports ...

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

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

  ngOnInit() {
    // ...
  }

  ngOnDestroy() {
    // ...
  }
}

2

Andrey Seregin 8 年前

我可以从您的代码中看到ngoninit和ngondestory在构造函数中,所以如果您将其带到构造函数之外,应该没问题。

代码示例:

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和ngondestory时,应始终检查以下步骤:

检查您是否从“角度/核心”导入了onnit和ondestroy
然后把它们加到课堂上

添加这些函数

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

  ngOnDestroy(){}
}