問題描述

在https://www.angular.cn 中 父組件傳值到子組件用單向綁定，此時例子中只是用了@input，并沒有用@output，但是我修改子組件里面的input里的值時，卻同時將父組件中的指定的li元素的值也修改了，此時應(yīng)該怎樣避免父組件值被修改

相關(guān)代碼

父組件ts：
import { Component, OnInit } from '@angular/core';
import {HEROES} from '../mock-data';

@Component({
selector: 'app-show-value',
templateUrl: './show-value.component.html',
styleUrls: ['./show-value.component.css']
})
export class ShowValueComponent implements OnInit {
para: Hhh = { //在oninit里面只能先對象繼承然后再對象賦值，對象聲明要在oninit外用構(gòu)造函數(shù)進(jìn)行

id: 1,
name: 'ww'

}
ok: string;
heros = HEROES;//列表的mockdata
selectedHero: Hhh;

constructor() {

}

ngOnInit() {

this.ok = 'ss';

}
onselect(hero2: Hhh): void {

this.selectedHero = hero2;

}
}

export class Hhh {
id: number;
name: string;
}

///////////////////////////////////////////////////////////////////////////
父組件的html
<div class = "showValue">
組件id號：{{para.id}}
組件名字：{{para.name|uppercase}}
<input type="text" [(ngModel)] = "para.name" placeholder="name">
<ul class="herosStyle">

<li *ngFor="let herolist of heros" (click)="onselect(herolist)">
  <span>{{herolist.name}}</span>
</li>

</ul>

</div>

<app-show-value-detail [hero2]="selectedHero"></app-show-value-detail>
///////////////////////////////////////////////////////////////////////////

子組件html:
<div *ngIf="hero2">
<div>被選中的名字是：{{hero2.name|uppercase}}</div>
<!--<input [(ngModel)]="hero2.name" placeholder="name">-->
</div>
///////////////////////////////////////////////////////////////////////////

子組件ts:
import {Component, Input, OnInit} from '@angular/core';
// import {Hhh} from '../show-value/show-value.component';

@Component({
selector: 'app-show-value-detail',
templateUrl: './show-value-detail.component.html',
styleUrls: ['./show-value-detail.component.css']
})
export class ShowValueDetailComponent implements OnInit {
@Input()
private hero2: Hhh2;

constructor() { }

ngOnInit() {

setInterval(() => {
  this.hero2.name = 'sss';
});

}

}
export class Hhh2 {
id: number;
name: string;
}