Question

单击链接时，如何将<a>标记内的数据绑定信息（在volume-links.component.html内）传递给我的页面视图组件。

我想将该特定的日记对象传递给我的页面视图。

我已经研究过父母和孩子的组件互动，但我认为这不是正确的方法。我已经考虑过通过服务进行沟通，但我不知道这对于像这样的问题会有什么用。

体积links.component.html

<ul class="navigation">
 <li *ngFor="let d of diary">
   <a id={{d.notebook_id}} routerLink="/page-view" routerLinkActive="active">Volume {{d.notebook_id}}, {{ d.date }}, {{ d.volume_id }}, Add MS {{ d.ms_id }}</a>
 </li>
</ul>

体积links.component.ts

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import 'rxjs/add/operator/map'

@Component({
  selector: 'app-volume-links',
  templateUrl: './volume-links.component.html',
  styleUrls: ['./volume-links.component.scss'],
  //encapsulation: ViewEncapsulation.None
})
export class VolumeLinksComponent implements OnInit {

diary : String;

constructor(private http: HttpClient) { }

ngOnInit() {
  this.http.get('/api/diaries').subscribe(data => {
    this.diary = data["data"]["docs"];
    console.log(this.diary);
  })
 }
}

Answer 1

您想查看https://angular.io/guide/component-interaction

有几种方法/方法可以实现这一点，并根据您的使用情况选择一个。

我会在VolumeLinksComponent中定义一个Input属性并在那里传递日记对象（这是第一部分“使用输入绑定将数据从父级传递给子级”）。

这看起来像是：

<a *ngFor='let diary of diaries' (click)='chooseDiary(diary)'>

<my-diary-container [diary]='selectedDiary'></my-diary-container>

那个父组件当然需要一个属性'selectedDiary'和一个方法：

chooseDiary(diary: Diary): void {
     this.selectedDiary = diary;
}

但是在您提供的情况下，您似乎只需要特定的ID，因为您想从api中检索详细信息？在这种情况下，您可以只定义一个带有id的路由，并在访问路径时请求另外的DiaryService来检索您需要的内容。

Angular：将ngFor中的单个对象传递给路由器链接组件

1 个答案: