时间戳

首页 > 解决方案 > 对组件的字符串输入所做的更改不会更改原始字符串

angular - 对组件的字符串输入所做的更改不会更改原始字符串

问题描述

当一个组件有一个字符串输入并且它对该字符串输入进行更改时，更改不会更改原始数据。当对字符串数组输入做同样的事情时，它确实会改变原始数据。

带输入的组件.ts：

@Input('str') str:string;
@Input('strArray') str:string[];

changeFunc(){
    this.str = "changed"
    this.strArray.push("changed")
}

带有data.ts的组件：

strData:string = "i am string";
strArrayData:string[] = ["i","am","array"]

组件与data.html：

<component-with-inputs [str]="strData" strArray="strArrayData">
</component-with-inputs>

因此，当 changeFunc 被称为 component-with-data 上的原始数据时，将如下所示：

 "i am string";
["i","am","array","changed"]

字符串不会改变，但字符串数组会改变。我怎样才能让字符串也改变？

标签： angularangular-components

解决方案

“字符串”是值类型，而数组是引用类型。

<component-with-inputs [str]="strData" strArray="strArrayData">
</component-with-inputs>

在上面的模板中，“strData”将作为值传递，而“strArrayData”将作为引用传递。

您应该将输入属性 [值类型] 更改发送到父组件。请参阅以下代码 -

@Component({
  selector: 'app-child',
  templateUrl: './your.component.html',
  styleUrls: ['./your.component.css']
})
export class YourChildComponent implements OnInit {

  @Input('str') str: string;
  @Input() arr: Array<string>;
  @Output() strChange = new EventEmitter<string>();
  constructor() { }

  ngOnInit() {


  }

  change() {
    this.strChange.emit('I am new string');
    this.arr.push('I am new string in array');
  }

}

在父组件模板中[注意盒子符号中的香蕉] -

<app-child [(str)]="myString" [arr]="array"></app-child>

推荐阅读