4.组件传值 - set及get
2018-10-31 本文已影响0人
嗨姑娘_大个子
参考:https://blog.csdn.net/kuangshp128/article/details/71172934/
1. 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}}