Angular组件传值-set及get

一. 基本概念

angular6 组件之间传值的几种方式：

• 父组件通过属性绑定到子组件，子组件通过事件传递参数到父组件
• 父组件通过局部变量获取子组件的引用
• 父组件使用@ViewChild获取子组件的引用
• 两个不相关联的组件使用中间人模式交互
• 终极大招:创建一个服务注入到组件中
• 直接把父组件当做服务注入到子组件中

二. 代码实现详解

set与get方法 ：父组件传递数据到子组件，子组件接受数据，对其接收的数据进行处理再显示

// 父组件 ts
data:string = "parent";  // 传递一个parent给子组件

// 父组件 html
<app-comdemo01 [input]="data"></app-comdemo01>

//子组件ts文件
export class Comdemo01Component implements OnInit {
  _input: string;
  @Input()
  public set input(v: string) {
    this._input = v.toUpperCase();  //转换大写输出
  }
  public get input(): string {
    return this._input;
  }
  constructor() {
  }
  ngOnInit() {
  }
}

//子组件html代码
I am fron {{input}}

三. 参考链接

https://blog.csdn.net/kuangsh...