zoukankan      html  css  js  c++  java
  • angularjs2 不同组件间的通信

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值

    /**
     *1.定义一个服务,作为传递参数的媒介
     */
    @Injectable()
    export class PrepService{
    
      //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法    
      profileInfo: any;
      
      }
     /**
     *2.传递参数的组件,我这边简单演示,直接就在构造器里面实现传参了
     */ 
    @Component({
      selector: 'XXXXXXX',
      templateUrl:"./XXXXXX.html",
      styleUrls:["./XXXXXXX.css"]
    })
    
    export class ReportComponent {
    
      //定义要传递的参数(此处是一个对象,也可以是方法)        
      reponsePrep:any ={
        name : "腊肉豆皮",
        address:"中欧五花肉"
      }
    
      //构造器注入PrepService服务    
      constructor(private ps:PrepService){
        //把当前组件参数赋值给PrepService的profileInfo属性
        ps.profileInfo = this.reponsePrep;
      }
     }
      /**
     *3.接受参数的组件
     */ 
    @Component({
      selector: 'YYYYYY',
      templateUrl:"./YYYYYYYY.html",
      styleUrls:["./YYYYYYY.css"]
    })
    
    export class commandComponent {
    
      //定义参来接收来自PrepService服务profileInfo属性的值
      requestPrep:any; 
    
      //构造器注入PrepService服务    
      constructor(private ps:PrepService){
        //把PrepService的profileInfo属性的值赋值给requestPrep实现组件的之间的传值
        this.requestPrep = ps.profileInfo;
      }
     }

    思路:定义一个服务作为传递参数的媒介注入在要传参的组件的构造器里面,然后对服务里面属性(传参媒介)来赋值和取值实现组件之间的传参

    以上demo只是给一个简单的思路给大家,大家可以自由发挥

  • 相关阅读:
    ubuntu系统安装微信小程序开发工具
    【工具】vscode-代码编辑器详解
    微信小程序开发
    webpack基本配置
    vue相关知识
    史上最强vue总结~万字长文---面试开发全靠它了
    ES6——字符串
    ES6——Proxy与Reflect
    ES6——Map与Set
    ES6——Symbol
  • 原文地址:https://www.cnblogs.com/hlkawa/p/6815023.html
Copyright © 2011-2022 走看看