如何在Angular2中从HTML获取对象并在其他组件中使用

看起来你已经找对了方向——用共享服务来跨组件传递数据，但你的实现里有个小问题：普通变量没法用subscribe监听变化，这也是你代码报错的原因。我来帮你修正这个实现，同时给你两种常用的解决方案，你可以根据场景选择。

方案一：用共享服务+BehaviorSubject（推荐用于非URL暴露的场景） #

BehaviorSubject是RxJS里的一种可观察对象，它能保存当前值，并且在值变化时通知所有订阅的组件，非常适合跨组件传递状态。

1. 改造你的共享服务 #

把原来的普通变量换成BehaviorSubject，这样组件就能订阅数据变化了：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {
  // 初始化一个BehaviorSubject，默认值设为null
  private selectedProjectId$ = new BehaviorSubject<string | null>(null);
  // 对外暴露一个只读的Observable，避免组件直接修改源数据
  public currentProjectId$: Observable<string | null> = this.selectedProjectId$.asObservable();

  // 设置选中的项目ID
  setProjectId(id: string): void {
    this.selectedProjectId$.next(id);
  }

  // 如果你需要同步获取当前ID，可以加这个方法（但优先用订阅方式）
  getCurrentProjectId(): string | null {
    return this.selectedProjectId$.value;
  }
}

2. 在列表组件中调用服务方法 #

修改你的列表组件模板和逻辑，点击时把项目ID传给服务：

<li *ngFor="let project of projects" class="list-group-item">
  {{project.name}} {{project._id}}
  <a [routerLink]="['/tasks']">View Tasks</a>
  <a [routerLink]="['/newTask']" (click)="passProjectId(project._id)">Create Task</a>
</li>

import { Component } from '@angular/core';
import { ProjectService } from './path-to-your-project.service';

@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html'
})
export class ProjectListComponent {
  projects: any[] = []; // 你的项目数据数组

  constructor(private projectService: ProjectService) {}

  passProjectId(projectId: string): void {
    this.projectService.setProjectId(projectId);
  }
}

3. 在目标组件中订阅数据 #

在newTask组件的ngOnInit里订阅服务的数据流，获取项目ID：

import { Component, OnInit } from '@angular/core';
import { ProjectService } from './path-to-your-project.service';

@Component({
  selector: 'app-new-task',
  templateUrl: './new-task.component.html'
})
export class NewTaskComponent implements OnInit {
  project_id: string | null = null;

  constructor(private projectService: ProjectService) {}

  ngOnInit(): void {
    this.projectService.currentProjectId$.subscribe(id => {
      this.project_id = id;
      // 拿到ID后就可以做后续操作，比如加载项目相关数据或者创建任务时关联ID
    });
  }
}

方案二：通过路由参数传递ID（适合需要URL暴露的场景） #

如果你希望用户可以通过直接访问URL打开特定项目的任务创建页面，或者刷新页面后数据依然存在，用路由参数是更好的选择。

1. 修改路由配置 #

在你的路由模块里给newTask路由添加参数：

import { Routes } from '@angular/router';
import { NewTaskComponent } from './new-task/new-task.component';

const routes: Routes = [
  // 其他路由...
  { path: 'newTask/:projectId', component: NewTaskComponent }
];

2. 列表组件中传递参数到路由 #

修改模板里的routerLink，把项目ID作为参数传进去：

<li *ngFor="let project of projects" class="list-group-item">
  {{project.name}} {{project._id}}
  <a [routerLink]="['/tasks']">View Tasks</a>
  <a [routerLink]="['/newTask', project._id]">Create Task</a>
</li>

3. 在目标组件中获取路由参数 #

在newTask组件里用ActivatedRoute获取路由参数：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-new-task',
  templateUrl: './new-task.component.html'
})
export class NewTaskComponent implements OnInit {
  project_id: string | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.project_id = params.get('projectId');
    });
  }
}

两种方案的选择 #

• 如果你不需要把项目ID暴露在URL里，或者需要传递整个项目对象（而不仅仅是ID），优先用方案一；
• 如果你需要支持直接通过URL访问特定页面，或者希望刷新页面后数据不丢失，选择方案二。

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