zoukankan      html  css  js  c++  java
  • ng中数据的传递(service传值)

    步骤;

    一、用到了三个ts文件  subscribe.service.ts 、aa.component.ts(传递参数的组件) 、bb.component.ts(接收参数的组件)

    二、实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值

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

    1)subscribe.service.ts :

    import { Injectable } from '@angular/core';
    import { ReplaySubject, Subject, Subscription } from 'rxjs';
    
    /**
     *1.定义一个服务,作为传递参数的媒介
     */
    @Injectable({
      providedIn: 'root'
    })
    
    export class SubscribeService {
    
      /* 公共模块 */
    
        //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法 
        profileInfo: any;
    
      constructor() {
    
      }
    
    }

    2)aa.component.ts:

    /**
     *2.传递参数的组件,我这边简单演示,直接就在构造器里面实现传参了
     */ 
    @Component({
      selector: 'XXXXXXX',
      templateUrl:"./aa.html",
      styleUrls:["./aa.css"]
    })
    
    export class ReportComponent {
    
      //定义要传递的参数(此处是一个对象,也可以是方法)        
     paramList = [
        { "seleDistance": "北往南-南往北" },
        { "highwayName": "京珠高速" },
        {
          "siteOfData": [
            { "stationName": '清远高岗镇段1' },
            { "stationName": '清远佛岗段2' },
            { "stationName": '清远大庙峡3' },
            { "stationName": '广州九龙湖段4' },
            // { "stationName": '广州民乐镇5' }
          ]
        }
      ];
    
      //构造器注入PrepService服务    
      constructor(private ps:PrepService){
    
        //把当前组件参数赋值给Service中的profileInfo属性
        ps.profileInfo = this.paramList;
      }
     }

    3) bb.component.ts:

    /**
     *3.接受参数的组件
     */ 
    @Component({
      selector: 'bb',
      templateUrl:"./bb.html",
      styleUrls:["./bb.css"]
    })
    
    export class commandComponent {
    
      //定义参来接收来自service服务profileInfo属性的值
      paramList: any;
    
      //构造器注入PrepService服务    
      constructor(private ps:PrepService){
        //把PrepService的profileInfo属性的值赋值给requestPrep实现组件的之间的传值
        this.paramList = ps.profileInfo;
      }
     }
  • 相关阅读:
    python3中try异常调试 raise 异常抛出
    基于 k8s-搭建 Kubernetes 的 web 管理界面
    PostgreSQL SERIAL创建自增列
    C++之同名覆盖、多态
    golang实现路由中间件middleware
    fastjson源码分析之序列化
    AJPFX实践 java实现快速排序算法
    AJPFX关于IO流的简单总结
    AJPFX关于多态中的动态绑定和静态绑定的总结
    关于java的arrays数组排序示例AJPFX的分享
  • 原文地址:https://www.cnblogs.com/a1-top/p/14056834.html
Copyright © 2011-2022 走看看