zoukankan      html  css  js  c++  java
  • Angular 组件之间的传值

    第一种方法(传单个或者多个参数):

    主页面方法:

    先添加引用:private _routes: Router,

    Details(PBSCode) {
    this._routes.navigate(['pbs-manage/pbs-detail', PBSCode]);
    }
    路由:
    //  reuse: true 可以使本页面不关闭
    {
    path: 'pbs-detail/:PBSCode',
    component: PBSDetailComponent,
    data: { title: '详情', reuse: true }
    }
    子页面接收:
    ngOnInit() {
    this.route.queryParams.subscribe((e) => {
    this.PBSCode= e.get('PBSCode');
    });
    }
    缺点:该方法会把参数显示在地址栏上
    第二个方法(传对象):
    主页面: private _routes: Router,
    添加引用:
    Details(bb,cc) {
    this.router.navigate(['/workOrder-manage/challenge-list'], { queryParams: { aa: bb, cc: dd } });
    }
    子页面:
    ngOnInit() {
    this.route.queryParams.subscribe((e) => {
    this.aa= e.aa;
    this.cc = e.cc ;
    });
    }
    备注:该方式与第一个方法的缺点一致,好处是不用配置路由
    第三种方式(模态窗)
    // 补充信息
    主页面方法:
    // componentParams中的是传的值 content是子页面的名字
    EditCarrier(ContractID) {
    const options = {
    wrapClassName: 'modal-lg custom-modal',
    content: PublicContractEditCarrierComponent,
    footer: false,
    componentParams: {
    ContractID: ContractID
    }
    };
    // 子页面关闭触发的事件
    this.modal.open(options).subscribe(result => {
    if (result === 'onDestroy') {
    this.GetDatas(0);
    }
    });
    }
    子页面接收:
    @Input()
    set dataci(ci: number) {
    this.ContractID = ci;
    }
    备注:主页面的传值参数名与子页面接收的参数名必须一致
    第四中:
    主页面:
    html:
    //子页面的组件名字 
    <app-back-admin-assessment-early-warning-index (receive)="GetParameters($event)"></app-back-admin-assessment-early-warning-index>
    ts页面:
    GetParameters(e) {
    console.log(e);
    }
    子页面:
    // receive这个名字随意 但主页的触发方法的名字要与这里的名字一致
    @Output('receive') checkedBack = new EventEmitter<any>();
    //触发这个方法就可以传值到主页面
    this.checkedBack.emit(this.params);
  • 相关阅读:
    前台传入的application/json;charset=UTF-8格式的数据,java后端从request中获取json数据
    vue-element-admin实战 | 第二篇: 最小改动接入后台实现根据权限动态加载菜单
    vue-element-admin
    进程间通信的几种方式以及线程间通信的几种方式
    vue调用api接口解决跨域问题
    C#多态性(函数重载)
    VirtualBox中安装CentOS7后无法上网的解决方案
    C#继承
    android通过url下载文件
    python的数据爬取
  • 原文地址:https://www.cnblogs.com/yuanxinghuo/p/10191490.html
Copyright © 2011-2022 走看看