ionic4 传递参数

ionic4 传递参数

环境

node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0

欢迎访问我的：ionic4专栏

路由传值

方式一（单个值）

路由定义

  {path: 'login/:id', loadChildren: './pages/login/login.module#LoginPageModule', data : {name: 'login'}},

跳转

constructor(private router: Router) {
}
this.router.navigate(['/login', id]);

或者

<a [routerLink]="[ '/login/',id]">登录</a>
<a routerLink="/login/{{id}}">登录</a>

接收

constructor(private activatedRoute: ActivatedRoute) {
}
this.activatedRoute.paramMap.subscribe(params => {
  this.id = params.get('id');
});
# 或者
this.activatedRoute.params.subscribe(params => {
  this.id = params.id
});

方式二（多个值）

跳转

constructor(private router: Router) {
}
this.router.navigate(['login'], {
  queryParams: {id: '1',name: 'test'}
});

接收

constructor(private activatedRoute: ActivatedRoute) {
  activatedRoute.queryParams.subscribe(queryParams => {
        let id = queryParams.id;
        let name = queryParams.name;
    });
}

组件间传值

父 -> 子

子组件
使用@Input()接受参数

@Component({
  selector: 'hm-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss'],
})
export class HMUploadComponent implements OnInit {
  @Input() fileList: HMFile[];
  @Input() msg: string;
}
...

父

  <hm-upload [msg]='msgData'></hm-upload>

注意：“父”变量msgData的变化会影响子组件变量msg变化，相反则不会。

子 -> 父

子组件
使用@Output()发送数据

  @Output() onDataChange = new EventEmitter();

父

<hm-upload [msg]='msgData' (onDataChange)='dataChanged($event)'></hm-upload>

dataChanged(event) {
  console.log(event);
}

EventBus(事件总线)

将会在下一篇详细说明如何实现EventBus。

欢迎访问我的：ionic4专栏