关于angular中@Input装饰器传入值遇到的问题

我们知道,在ng中,父子组件通信中的一种方式就是使用@Input/@Output装饰器,@Input用于数据从父组件流入子组件,@Output用于从子组件传出数据到父组件。
准备工作:定义两个组件
父组件:HomePage
html:

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Home</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>
    父组件简单值:{{myVal}}
    <br/>
    父组件对象属性值:{{MyJson.stringify(myObject)}}
    <br/>
    子组件:
    <br/>
    <app-child [inputObject]="myObject" [inputSingleVal]="myVal"></app-child>
</ion-content>

ts:

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

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
    MyJson = JSON;
    myObject = {
        name: 1
    };
    myVal = 1;
    ngOnInit(): void {
    }
}

子组件:
html:

<div>
    子组件的简单值:{{inputSingleVal}}
    <br/>
    子组件的对象属性值:{{MyJson.stringify(inputObject)}}
    <br/>
    <ion-button (click)="childCompChangeValue()">子组件改变简单值</ion-button>
    <ion-button (click)="childCompChangeObject()">子组件改变对象</ion-button>
</div>

ts:

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

@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {
    @Input() inputSingleVal;
    @Input() inputObject;
    MyJson = JSON;
    ngOnInit() {
    }
    childCompChangeValue() {
        this.inputSingleVal++;
    }
    childCompChangeObject() {
        this.inputObject.name++;
    }
}

测试效果:

@Input.gif

从图片中我们可以看到:

• 当点击改变子组件简单值按钮时,父组件的值并没有发生变化,说明父子组件的数据完全的被"隔离",相互不会被影响,当然,如果要能够实现双向绑定的效果,可以参照我前面的文章:
  angular 自定义组件中实现双向绑定
• 当点击改变组件对象按钮时,父组件的值也发生了变化,但是这里并没有做任何相关的双向绑定的处理。
  个人理解：
    当传入基本数据类型或字符串类型数据时,等于是js中的值传递,所以当子组件改变变量值时,不会影响原来的值;
    当传入的是对象类型时,等于是js中的引用传递,子组件中的变量只是将地址指向了父组件对象,所以当子组件改变变量值时,父组件的变量也同时会跟着一起发生改变;