Question

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

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

它从父项组件中获得animal对象，该对象只是一个子项列表。

@Input() animal;

当我单击它时，我将移动到另一个组件，在该组件中我想显示此单击的animal对象的一些属性。

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

所有帮助将不胜感激。

Answer 1

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

您的路由路径：

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'])
  })
}

Answer 2

尝试使用解析器路由解析器服务-您可以在路由加载之前执行一些操作

 {
    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 3

发件人：

    router: Router;
    payload = {};      

    constructor(router: Router) {
    this.router = router;
    this.payload = {foo: 'foo', bar: 'bar'};
  }

  navigate(): void {
     this.router.navigate(['/routing/path'], {state: this.payload}));
  }

收件人：

  constructor(router: Router) {
     console.log(router.getCurrentNavigation().extras.state);
   }

新视图将在控制台中打印有效载荷对象的内容。

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

3 个答案: