美文网首页
4.组件传值 - set及get

4.组件传值 - set及get

作者: 嗨姑娘_大个子 | 来源:发表于2018-10-31 15:01 被阅读0次

    参考:https://blog.csdn.net/kuangshp128/article/details/71172934/

    1. angular6 组件之间传值的几种方式:
    • 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件
    • 父组件通过局部变量获取子组件的引用
    • 父组件使用@ViewChild获取子组件的引用
    • 两个不相关联的组件使用中间人模式交互
    • 终极大招:创建一个服务注入到组件中
    • 直接把父组件当做服务注入到子组件中
    二. setget方法 :父组件传递数据到子组件,子组件接受数据,对其接收的数据进行处理再显示
    // 父组件 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}}
    

    相关文章

      网友评论

          本文标题:4.组件传值 - set及get

          本文链接:https://www.haomeiwen.com/subject/oojatqtx.html