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

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

    
        
            
        
        Home
    



    父组件简单值:{{myVal}}
    

    父组件对象属性值:{{MyJson.stringify(myObject)}}
    

    子组件:
    

    

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:

    子组件的简单值:{{inputSingleVal}}
    

    子组件的对象属性值:{{MyJson.stringify(inputObject)}}
    

    子组件改变简单值
    子组件改变对象

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中的引用传递,子组件中的变量只是将地址指向了父组件对象,所以当子组件改变变量值时,父组件的变量也同时会跟着一起发生改变;