Question

我正在尝试使用 appcomponent 发送给我的选择组件的输入。

我需要在课堂上使用该值。我的课上没有发现它的问题，但是当我把它放在模板中时，我可以看到它。

例如，在此组件中：

import {Component, Input} from 'angular2/core';
@Component({
selector: 'test',
template: "<h4>test 1 {{test_input}}</h4>   <br>" 
})
export class TestComponent {
private test_test;

@Input() test_input: string;
}

我需要使用test_input来修改它。

Answer 1

在调用ngOnInit()之前，不会设置输入。将代码移动到此方法

export class TestComponent {
  private test_test;

  @Input() test_input: string;

  ngOnInit() {
    console.log(this.test_input);
  }
}

它会做你期望的。

Answer 2

您甚至可以检查test_test变量的当前和 之前的 值。

export class TestComponent {

  @Input() test_test:string;

  ngOnChanges(...args: any[]) {
        console.log('onChange fired');
        console.log(args[0].test_test.currentValue);
        console.log(args[0].test_test.previousValue)
  }

  ngOnInit() {
    console.log(this.test_input);
  }
}

Answer 3

我需要使用test_input来修改它

如果需要在将值更改传播到TestComponent时修改该值，请使用setter：

@Input() set test_input(newValue: string) { ... }

这在组件交互菜谱中讨论，Intercept input property changes with a setter示例。

Answer 4

这是我的ngselect组件

@Component({
selector: 'select-test',
template: `<ng-select [allow-clear]="true"
            [items]="items"
            [disabled]="disabled"
            (data)="refreshValue($event)"
            (selected)="selected($event)"
            (removed)="removed($event)"
            (typed)="typed($event)"
            [placeholder]="'No city selected'"></ng-select> {{dslam}}`,
directives: [Select, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
})
export class SelectComponent {
private value: any = {};
//private items:Array<string> = [];
@Output() selected_value = new EventEmitter();
@Input() dslam: any;
private _disabledV:string = '0';
private disabled:boolean = false;
private items: Array<string> = [];
constructor(){
  this.items = this.dslam;
}

所以我需要的是将我的输入“dslam”这是一个数组放入“items”每次我用我的typeahead（我有输入dslam）改变它的问题，当我改变它，我可以看到它变化，但我没有找到解决方案来改变我的选择我的阵列我希望我很清楚

在angular2上使用带有打字稿的类中的输入

4 个答案: