简介
在这篇文章中，你将学习三种在角度组件之间传递数据的方法，根据不同的场景，哪种方法是最好的。
1.URL传递数据
假设我们正在从一个页面导航到另一个页面，其中前一个页面被销毁，而我们正在登录到另一个页面。如果要传递的数据不多(例如，对象的id)，我们可以使用URL来传递数据。
有两种方法可以通过Angular中的URL传递数据：
- 路由器参数
- 查询参数
如果该参数对于组件是必需的，则我们必须使用_ROUTER参数_。否则，我们可以使用_Query Params_。
使用路由器参数
路由器参数是必需的参数。我们必须在路由器模块中使用URL注册参数，如下所示：
1[label app-router.module.ts]
2const routes: Routes = [
3 { path: 'list/:id', component: AppListComponent }
4];
在本例中，list是路由URL，：id是必须传递的路由器参数，AppListComponent是要挂载到该路由上的组件。
通过routerLink指令传递路由器参数
1<button
2 type="button"
3 [routerLink]="['/list', id]"
4>
5 Show List
6</button>
在本例中，id是在该组件的代码中初始化的变量，/list是我们要导航的路径。
通过route服务传递路由器参数
1[label app.component.ts]
2id = 28;
3
4constructor (private router: Router) {}
5
6route() {
7 this.router.navigate(['/list', this.id]);
8}
读取路由器参数
下面介绍如何从路由到的组件中读取路由器参数：
1[label app-list.component.ts]
2constructor(
3 private activatedroute: ActivatedRoute
4) {
5 this.activatedroute.params.subscribe(data => {
6 console.log(data);
7 })
8}
使用查询参数
查询参数是可选的参数。不需要为查询参数注册单独的URL。
1[label app-router.module.ts]
2const routes: Routes = [
3 { path: 'list', component: AppListComponent }
4];
在本例中，list为路由URL，AppListComponent为组件。
通过routerLink指令传递查询参数
1<button
2 type="button"
3 [routerLink]="['/list']"
4 [queryParams]="{id: '24'}"
5>
6 Show List
7</button>
在本例中，id为键，24为静态值。您还可以通过变量传递动态值。
通过route Service传递查询参数
1[label app.component.ts]
2id = 28;
3
4constructor (private router: Router) {}
5
6route() {
7 this.router.navigate(['/list'], {queryParams: {id: this.id}});
8}
读取查询参数
1[label app-list.component.ts]
2constructor(
3 private activatedroute: ActivatedRoute
4) {
5 this.activatedroute.queryParams.subscribe(data => {
6 console.log(data);
7 })
8}
<$>[备注] 注意： 获取有关此article.中的角度路由器参数]的更多详细信息 <$>
2.通过@Input和@Output传递数据
如果我们想要将数据从子组件传递给父组件，或者将父组件传递给子组件，我们可以使用@Input和@Output。
1[label app-parent.component.html]
2<app-child
3 [jsonData]="data"
4 (outputData)="data = $event"
5></app-child>
这里的data是在组件代码中初始化的变量。
1[label app-child.component.ts]
2import { Component, Input, OnInit } from '@angular/core';
3
4@Component({
5 selector: 'app-child',
6 template: ''
7})
8export class AppChild implements OnInit {
9 @Input()
10 jsonData;
11 @Output()
12 outputData = new EventEmitter();
13 constructor() {}
14
15 ngOnInit() {
16 console.log(this.jsonData);
17 }
18
19 emitData(data) {
20 this.outputData(data);
21 }
22}
通过这种方式，我们可以将数据从子对象传递到父对象以及从父对象传递到子对象。
<$>[备注]
注意； 获取此article](https://andsky.com/tech/tutorials/angular-inputs-angular)中的@Input()和此article.中的[@Output()的更多详细信息
<$>
3.使用可观测数据通过服务传递数据
如果两个组件是兄弟，或者层次结构中的组件级别更远，那么最好使用一个服务来传递使用可观察数据的数据。
此示例使用RxJS subject创建可观测对象：
1[label app.service.ts]
2import { Injectable } from '@angular/core';
3import { Subject } from 'rxjs';
4
5@Injectable({providedIn: 'root'})
6export class AppService {
7 observer = new Subject();
8 public subscriber$ = this.observer.asObservable();
9
10 emitData(data) {
11 this.observer.next(data);
12 }
13}
要发出数据，您可以调用该服务的emitData方法，而要获取数据，您必须订阅subcerber$，如下所示：
1constructor(private appService: AppService) {}
2
3ngOnInit() {
4 this.appService.subscriber$.subscribe(data => {
5 console.log(data);
6 });
7}
结论
到目前为止，有三种方法可以在组件之间以角度来回传递数据。现在，继续构建一些非常棒的组件！