从子 @Input setter 访问提供者方法 - Ionic2 / Angular2

Question

我正在尝试从我的组件 @Input 方法访问提供程序 class。但是，当调用 @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 方法中访问提供者方法？

Answer 1

要访问您的提供者，您必须将他们的信息告诉应用程序。在引导应用程序时，关于 app.ts 上的 ionic2，请添加您的提供商

import {YourProviderWithInjectableDecorator} from 'somepath';

    ionicBootstrap(MyApp, [YourProviderWithInjectableDecorator])

在你的 class

Component({
  selector: 'selected-options',
  templateUrl: 'build/components/selected-options/selected-options.html',
  inputs: ['node']
})
export class SelectedOptions {

  constructor(private provider: MyProvider){}

  @Input()
  set node(n: any){
     this.provider.sampleMethod();    
  }
}

希望对您有所帮助

Answer 2

这听起来可能令人困惑，但你得到的错误是因为提供者没有作为参数包含在构造函数中（因此，你的构造函数没有创建 MyProvider class).

请看this plunker。就像你在那里看到的那样，即使我们在 @Input setter 拦截器中使用 myProvider 实例，构造函数已经创建了服务实例，所以你可以调用 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 参数，您的代码应该可以正常工作:)

从子 @Input setter 访问提供者方法 - Ionic2 / Angular2

Access a provider method from child @Input setter - Ionic2 / Angular2

typescript

ionic2

angular