我正在尝试从我的组件访问提供程序类@Input
方法。然而,当@Input
方法被称为
以下是我的代码
#provider
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
@Injectable()
export class MyProvider {
constructor() {}
sampleMethod(){
return 'sample method';
}
}
#component
import { Component, Input } from '@angular/core';
import {MyProvider} from '../../providers/my-provider/my-provider';
import { NavController} from 'ionic-angular';
@Component({
selector: 'selected-options',
templateUrl: 'build/components/selected-options/selected-options.html',
inputs: ['node']
})
export class SelectedOptions {
provider: MyProvider;
@Input()
set node(n: any){
this.provider.sampleMethod();
}
}
#page (where I call the component)
<selected-options [node]="node.Name"></selected-options>
所以问题出在线路上
this.provider.sampleMethod();
我收到的错误是ORIGINAL EXCEPTION: TypeError: Cannot read property 'sampleMethod' of undefined
.
所以我相信provider: MyProvider;
未加载时@Input
方法被调用。但如果我在构造函数中使用它,效果很好。
我如何访问内部的提供者方法@Input
method?
这可能听起来令人困惑,但您得到的错误是因为提供程序没有作为参数包含在构造函数中(因此,您的构造函数没有创建MyProvider
class).
请看一下这个笨蛋 https://plnkr.co/edit/bToHqJ?p=preview。就像你可以在那里看到的那样,即使我们使用myProvider
实例中的@Input
setter拦截器,构造函数已经创建了服务的实例,所以你可以调用sampleMethod()
没有什么问题。
import { Component, Input } from "@angular/core";
import { MyProvider } from './my-provider.ts';
@Component({
templateUrl:"child.html",
selector: 'child-selector',
inputs: ['node']
})
export class ChildPage {
private result: string;
@Input()
set node(node: string){
// Because the provider instance is injected on the constructor, we can
// call the sampleMethod() here
node = node + ' from ChildPage';
this.result = this.myProvider.sampleMethod(node);
}
// Injects an instance of the MyProvider class
constructor(private myProvider: MyProvider) {
}
}
所以如果你只是添加private myProvider: MyProvider
构造函数中的参数您的代码应该可以正常工作:)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)