Angular 5中如何将变量从一个组件传递到另一个组件？

在Angular 5里把HomeComponent的变量传给UserComponent，得看两个组件的关联关系，我给你整理了几种最常用的方案，你可以根据实际场景选择：

1. 父子组件场景：使用@Input()装饰器 #

如果UserComponent是HomeComponent的子组件（直接嵌套在Home的模板里），这是最简单的传值方式：

步骤1：在UserComponent中定义接收变量 #

首先在user.component.ts中引入Input装饰器，声明要接收的变量：

// user.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent {
  // 用@Input()标记需要从父组件接收的变量
  @Input() selectedUser: string;
  @Input() userList: string[];
}

步骤2：在HomeComponent模板中绑定传递 #

回到home.component.html，在使用子组件的地方通过属性绑定把变量传过去：

<!-- home.component.html -->
<select class="custom-select custom-select-lg mb-3 content" [(ngModel)]="selectedVal" (change)="onChange($event.target.value)">
  <option *ngFor="let user of users" [value]="user">{{user}}</option>
</select>

<!-- 传递selectedVal和users给子组件 -->
<app-user [selectedUser]="selectedVal" [userList]="users"></app-user>

这样UserComponent就能直接使用selectedUser和userList这两个变量了。

2. 无直接关联组件：使用共享服务 #

如果两个组件是兄弟组件、跨模块组件，或者没有嵌套关系，推荐用共享服务来实现数据共享：

步骤1：创建共享服务 #

先创建一个UserService来存储和传递数据：

// user.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class UserService {
  // 用BehaviorSubject保存数据，支持订阅更新
  private selectedUserSource = new BehaviorSubject<string>('');
  currentSelectedUser = this.selectedUserSource.asObservable();

  private userListSource = new BehaviorSubject<string[]>([]);
  currentUserList = this.userListSource.asObservable();

  constructor() { }

  // 更新选中用户的方法
  changeSelectedUser(user: string) {
    this.selectedUserSource.next(user);
  }

  // 更新用户列表的方法
  changeUserList(users: string[]) {
    this.userListSource.next(users);
  }
}

步骤2：在HomeComponent中更新服务数据 #

在home.component.ts中注入服务，把变量同步到服务里：

// home.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from './user.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  users = ['User1', 'User2', 'User3']
  selectedVal = ''

  constructor(private router: Router, private userService: UserService) { }

  ngOnInit() {
    // 初始化用户列表到服务
    this.userService.changeUserList(this.users);
  }

  onChange(newValue) {
    this.selectedVal = newValue;
    // 把选中的用户同步到服务
    this.userService.changeSelectedUser(newValue);
  }
}

步骤3：在UserComponent中订阅服务数据 #

在user.component.ts中注入服务，订阅数据更新：

// user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  selectedUser: string;
  userList: string[];

  constructor(private userService: UserService) { }

  ngOnInit() {
    // 订阅选中用户的变化
    this.userService.currentSelectedUser.subscribe(user => {
      this.selectedUser = user;
    });

    // 订阅用户列表的变化
    this.userService.currentUserList.subscribe(users => {
      this.userList = users;
    });
  }
}

3. 路由跳转场景：使用路由参数 #

如果是通过路由从HomeComponent跳转到UserComponent页面，可以用路由参数传递数据：

步骤1：配置路由 #

确保路由配置中包含两个组件的路径：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'user', component: UserComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

步骤2：在HomeComponent中带参数跳转 #

修改onChange方法，跳转时通过queryParams传递参数：

// home.component.ts
onChange(newValue) {
  this.selectedVal = newValue;
  // 用queryParams传递参数，数组需要转成字符串
  this.router.navigate(['/user'], { 
    queryParams: { 
      selectedUser: newValue, 
      users: JSON.stringify(this.users) 
    } 
  });
}

步骤3：在UserComponent中获取路由参数 #

在user.component.ts中通过ActivatedRoute获取参数：

// user.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  selectedUser: string;
  userList: string[];

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 订阅路由参数变化
    this.route.queryParams.subscribe(params => {
      this.selectedUser = params['selectedUser'];
      // 解析字符串转回数组
      this.userList = JSON.parse(params['users']);
    });
  }
}

内容的提问来源于stack exchange，提问作者Develo55