Question

我学习Angular2所以要温柔......我有一个基本的Component，它有一个字符串数组。我想将一个整数传递给这个组件，让它返回在该参数的索引处找到的字符串。

E.g。 myComponent [number] = 1返回字符串＆＃34;第二个元素＆＃34;。

到目前为止，我的代码是：

import { Component } from '@angular/core';

@Component({
  selector: 'myComponent',
  template: 
    `<h1>Returned Value {{returnedString}}</h1>,`, 
  inputs:['number']
})
export class MyComponent  { 
  myStringArray: string[]; 
  returnedString: string;

  constructor(){
    this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
    this.returnedString = 'number'+this.myStringArray['number'.valueOf()];
  }
}

我正在调用此组件，如下所示

<myComponent [number]=1></myComponent>

我打印返回到屏幕的值并获得未定义的＆＃39;。

任何想法的人？

Answer 1

由于您要从核心绑定到自定义属性导入Input和OnChanges，然后实现为Input以创建自定义属性。 OnChanges只是确保在绑定值更改时更新值。

从组件装饰器中删除输入键

import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'myComponent',
  template: 
    `<h1>Returned Value {{returnedString}}</h1>,`
})
export class MyComponent  implements OnChanges { 
  myStringArray: string[];
  returnedString: string;
  @Input() inputNumber: number; 

  constructor(){
    this.myStringArray = ['First','Second','Third','Forth','Fifth','Sixth'];
    this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];
  }

  ngOnChanges() {
    this.returnedString = 'number'+this.myStringArray[Number(this.inputNumber)];   
  }
}

将您的代码使用情况更新为以下

<myComponent [inputNumber]="1"></myComponent>

这是一个样本plunker。 https://plnkr.co/edit/S074zoVJ3ktQDKkcQgxe?p=preview

Answer 2

我很难发送字符串输入。这是正确的方法，

<myComponent [stringvar]="'string value'"></myComponent>

＆＃34;字符串值＆＃34;不管用。角度期望对象或双引号内的数字。字符串应该在双引号内的单引号内＆＃34;＆＃39;字符串＆＃39;＆＃34;

Answer 3

您还需要在组件中创建一个数字变量，以保存该值。

import {Component, OnInit} from '@angular/core';
@Component({
  selector: 'myComponent',
  template: 
    `<h1>Returned Value {{returnedString}}</h1>,`, 
  inputs:['myNum']
})
export class MyComponent implements OnInit { 
  myStringArray: string[] = ['First','Second','Third','Forth','Fifth','Sixth']; 
  returnedString: string;
  public myNum: number;  <= here is your variable

  ngOnInit() {
      //you can use this.myNum anywhere now like this
      this.returnedString = 'number '+ this.myStringArray[this.myNum];
  }

  constructor(){

  }
}

您可能需要更改输入的名称，因为数字是keyword。

另一个注意事项：您必须使用OnInit代替constructor才能开始使用您的输入。 ngOnInit是Angular在构建组件并评估绑定时调用的Angular2 lifecycle方法

Answer 4

这是另一种选择。它演示了如何为returnedString使用getter。需要的代码少于ngOnChanges。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-cmp',
  template: `
    <p>returnedString = {{ returnedString }}</p>
  `
})
export class MyComponent {
  myStringArray: string[]  = ['First','Second','Third','Forth','Fifth','Sixth'];
  @Input() stringIndex: number;

  get returnedString(): string {
    if (this.stringIndex !== undefined) {
      return this.myStringArray[this.stringIndex];
    }
  }
}

Answer 5

这很简单。 See this demo. 假设您有两个组件parent和child。并且您希望将变量传递给child并在那里进行修改，例如views。

在parent模板上：

<child [(views)]="views"></child>

在child组件上：

  @Input() views: number;
  @Output() viewsChange = new EventEmitter<number>();

  // Bind this function to button click or some events:
  updateViews() {
    this.views++;
    this.viewsChange.emit(this.views); // Emit the value to parent:
  }

详细说明： 在父级中绑定[(views)]时，它的作用如下：

<child 
        [views]="views" 
        (viewsChange)="views = $event">
</child>

所以，它正在监听viewsChange输出函数。无论何时，您viewsChange.emit，父views都会更新。

问题：输出函数应精确命名为$var + "Change"。如果您选择其他名称，则必须执行此操作：

<child 
            [views]="views" 
            (customEmitterFunction)="views = $event">
    </child>

Answer 6

为了将子组件中的数据传递给父组件，您需要设置一个Output参数，以触发组件应该实现OnChanges接口的信号，您的组件应该是这样的

    import { Component, Input,Output,EventEmitter,OnChanges,SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-cmp',
  template: `
    <p>returnedString = {{ returnedString }}</p>
  `
})
export class MyComponent implements OnChanges {
  myStringArray: string[]  = ['First','Second','Third','Forth','Fifth','Sixth'];
  @Input() stringIndex: number;
 @Output() cardinalNumber:EventEmitter<string> = new EventEmitter<string>();// you define an Output, this will emit a signal that will received from the father Component

  ngOnChanges(changes:SimpleChanges) {
  // when the input changes we emit a signal
  this.cardinalNumber.emit(this.myStringArray[this.stringIndex]);
  }
  get returnedString(): string {
    if (this.stringIndex !== undefined) {
      return this.myStringArray[this.stringIndex];
    }
  }
}

然后在父组件的模板中插入：

    <my-cmp [stringIndex]=the parameter in father Component's controller
         (cardinalNumber)="method2beinvoked($event)">
</my-cmp>

method2beInvoked是父组件中处理消息的方法; 或者你可以这样做：

    <my-cmp [stringIndex]=the parameter in father Component's controller
         (cardinalNumber)="parameter=$event")>
</my-cmp

其中parameter是父组件控制器中的参数

将参数传递给Angular2组件

6 个答案: