在路由Angular之间切换时如何在组件之间传递对象

Question

我有一个看起来像这样的组件

<div class="animal">
  <a routerLink="/animal/{{animal.id}}">
  <div>
    ...
  </div>
  </a>
</div>

它从父组件获取animal 对象，这只是一个子组件列表。

@Input() animal;

当我点击它时，我正在移动到另一个组件，我想在其中显示这个点击的animal 对象的一些属性。

我想创建一个服务来存储这个对象，但问题是我不知道如何只获取单击的对象而不是列表中的每个对象。

我们将不胜感激。

Answer 1

尝试使用 resolver Route Resolver Service - 您可以在路由加载之前执行一些操作

 {
    path: '',
    component: Component,
    resolve: { service: Service },
  },

export class Service implements Resolve<object | string> {

  constructor() {
    }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<object | string> | Promise<object | string>  {
        return {};
    }

在您的 onInit 中，您可以像这样在组件构造函数中注入 ActivatedRoute 服务来读取数据

constructor(private _activatedRoute: ActivatedRoute) {
    }

Onint 中的代码 - this.variable = this._activatedRoute.snapshot.data["service"];

Answer 2

您可以通过在angular 中使用ActivatedRoute 来捕获路由组件中的参数

你的路由路径：

const routes : Routes = [
  { 
    // Other routes
  },
  {
     path:'animal/:id'
     component : AnimalDetailsComponent
  }
]

animal-details.component.ts

constructor(private route : ActivatedRoute) {} 

ngOnInit(){
  this.route.params.subscribe((params)=>{
     console.log(params['id'])
  })
}