Angular: 无法通过路由传递对象？

问题出现的原因是Angular没有直接支持通过路由传递对象。

解决方法如下：

1. 在组件中定义一个函数，用于获取整个对象：

    getProduct(productId: number) {
        // 根据ID从服务器获取产品对象
        // 返回产品对象
    }

2. 在模板中使用该函数来传递对象：

    <ul>
        <li *ngFor="let product of products">
            <a [routerLink]="['/product', product.id]" [state]="{ product: getProduct(product.id) }"></a>
        </li>
    </ul>

这样，当用户点击链接时，Angular会调用getProduct函数获取产品对象，并将其作为状态传递给目标路由。

注意：在目标路由组件中，需要使用以下方式来获取传递的对象：

    this.route.paramMap.subscribe(params => {
        const product = history.state.product;
        // 使用产品对象
    });

通过以上方法，我们可以在Angular中实现通过路由传递对象的功能。

Angular: 无法通过路由传递对象的原因及解决方法

在Angular中，有时我们需要在不同页面之间传递对象。然而，在Angular中，不能直接通过路由传递对象。相反，我们需要通过传递id，然后在新页面上重新查找该对象来解决这个问题。这样，即使在新页面上刷新，一切仍然正常工作。

为什么不能直接通过路由传递对象呢？这是因为对象是复杂的数据结构，包含许多属性和方法。当我们尝试通过路由传递对象时，Angular会尝试将对象转换为URL参数。然而，URL参数只能是简单的字符串，无法表示复杂的对象结构。因此，我们需要找到一种更合适的方法来传递对象。

解决方法是通过传递id来代替直接传递对象。通过传递id，我们可以在接收页面上重新查找对象。这样，即使在接收页面上刷新，我们仍然可以通过id重新查找对象并恢复其状态。这种方法保证了数据的一致性和可用性。

以下是通过路由传递对象的示例代码：

// 发送页面
import { Router } from '@angular/router';
export class SendingComponent {
  constructor(private router: Router) {}
  sendObject(object: any) {
    const id = object.id;
    this.router.navigate(['/receiving', id]);
  }
}

// 接收页面
import { ActivatedRoute } from '@angular/router';
export class ReceivingComponent {
  object: any;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    // 根据id重新查找对象
    this.object = this.getObjectById(id);
  }
  getObjectById(id: string) {
    // 根据id查找对象的逻辑
    // 返回对象
  }
}

通过以上代码，我们可以在发送页面中调用sendObject方法，并传递一个对象。然后，我们使用Router导航到接收页面，并传递对象的id作为参数。在接收页面中，我们通过ActivatedRoute获取id参数，并使用getObjectById方法重新查找对象。这样，我们就可以在接收页面上使用传递的对象了。

总结起来，虽然在Angular中不能直接通过路由传递对象，但我们可以通过传递id并在接收页面上重新查找对象来解决这个问题。这样，即使在接收页面上刷新，我们仍然可以保持数据的一致性和可用性。通过合适的方法传递对象，我们可以更好地管理和处理数据。

Angular: 通过路由传递对象的问题及解决方法

在Angular中，通过路由传递对象的选项是受限的。更好的选择是使用服务。如果您在父组件中提供了一个服务实例，那么该实例将被注入到父组件和子组件中，从而使共享的数据立即可用。

如果我没记错的话，这是在讨论同一个视图的父子组件，而不是一个路由到另一个完全不同的视图的视图组件。

是的，你说得对。当你将对象作为参数传递给路由时，Angular路由会对URL产生影响。

解决方法是使用服务来共享数据，而不是通过路由传递对象。通过在父组件中提供一个服务实例，父组件和子组件都可以注入并访问相同的服务实例，从而实现数据的共享。您可以在服务中定义一个可观察对象，然后在父组件中进行更改，并在子组件中订阅该对象以获取最新的数据。

在下面的示例中，我们可以看到如何使用服务来共享数据：

// 在父组件中定义一个可观察对象
export class DataService {
  private dataSubject = new BehaviorSubject('');
  // 在父组件中进行更改
  updateData(data: string) {
    this.dataSubject.next(data);
  }
  // 在子组件中订阅对象以获取最新数据
  getData(): Observable {
    return this.dataSubject.asObservable();
  }
}
// 在父组件中使用服务来共享数据
export class ParentComponent {
  constructor(private dataService: DataService) {}
  updateData(data: string) {
    this.dataService.updateData(data);
  }
}
// 在子组件中使用服务来获取共享数据
export class ChildComponent {
  data: string;
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

在上面的示例中，我们创建了一个DataService服务，其中包含一个可观察对象dataSubject。父组件中的updateData方法用于更新数据，并通过调用dataSubject.next(data)方法将最新数据发布给订阅者。在子组件中，我们通过调用getData方法来订阅该可观察对象，并在回调函数中将最新数据赋值给data变量。

通过使用服务来共享数据，我们可以避免通过路由传递对象的限制，并且可以在父子组件之间实现即时的数据共享。

您可以在以下链接中查看完整的示例代码：[https://stackblitz.com/edit/angular-6-communicating-between-components-1gunkw?file=app%2Fapp.component.ts](https://stackblitz.com/edit/angular-6-communicating-between-components-1gunkw?file=app%2Fapp.component.ts)