html – 将参数传递给Angular2组件

发布时间：2020-12-14 19:46:23 所属栏目：资源来源：网络整理

导读：我正在学习Angular2所以要温柔我有一个基本的Component,它有一个字符串数组.我想将一个整数传递给这个组件,让它返回在该参数的索引处找到的字符串. 例如. myComponent [number] = 1返回字符串“second element”. 到目前为止我的代码是这样的： import { Com

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

例如. myComponent [number] = 1返回字符串“second element”.

到目前为止我的代码是这样的：

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

@Component({
  selector: 'myComponent',template: 
    `


我将此组件称为如下


我打印返回到屏幕的值并获得’undefined’.
有什么想法吗？


最佳答案
由于您希望从核心绑定到自定义属性导入Input和OnChanges,然后实现为Input以创建自定义属性. OnChanges只是确保在绑定值更改时更新值.
从组件装饰器中删除输入键

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

@Component({
  selector: 'myComponent',`
})
export class MyComponent  implements OnChanges { 
  myStringArray: string[];
  returnedString: string;
  @Input() inputNumber: number; 

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

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

将代码使用情况更新为以下内容


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

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!