Изменения, внесенные в строку ввода компонента, не изменяют исходную строку

Question

Когда у компонента есть строковый ввод, и он вносит изменения в этот строковый ввод, изменения не изменяют исходные данные. Делая то же самое с вводом строкового массива, он меняет исходные данные.

компонент-с-inputs.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 исходные данные компонента-с-данными будут выглядеть так:

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

строка не изменяется, но массив строк. Как я могу сделать строку также изменить?

Answer 1

a 'строка' является типом значения, в то время как массив является ссылочным типом.

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

В указанном выше шаблоне "strData" будет передано как значение, а "strArrayData" будет передано какreference.

Необходимо изменить свойство input [тип значения], передаваемое родительскому компоненту.См. Следующий код -

@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>