注意:我找到了文章cannot find OnInit in typescript during implementation,但是下面的代码已经在导入OnInit / OnDestroy。
我发现的所有示例(例如Using 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));
}
}
答案 0 :(得分:3)
方法ngOnInit
和ngOnDestroy
应该在构造函数之外。像这样:
// imports ...
@Component({
// ...
})
export class SubmissionComponent implements OnInit, OnDestroy {
// ...
constructor( /* ... */ ) {
// ...
}
ngOnInit() {
// ...
}
ngOnDestroy() {
// ...
}
}
答案 1 :(得分: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时,应始终检查以下步骤:
添加这些功能
import { OnInit, OnDestroy } from '@angular/core';
export class ComponentComponent implements OnInit, OnDestroy {
ngOnInit(){}
ngOnDestroy(){}
}