环境
node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0
路由传值
方式一（单个值）
路由定义
{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。
