環(huán)境

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()接受參數(shù)

@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()發(fā)送數(shù)據(jù)

  @Output() onDataChange = new EventEmitter();

父

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

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

EventBus(事件總線)

將會在下一篇詳細說明如何實現(xiàn)EventBus。