Angular: Sharing Data Between Angular Components u

问题:

This is my parent component(metric-details.component.html) where I'm trying to get the id number of a selected button and pass it to my child component. I'm not sure on the proper syntax to transfer the information which I think is my problem.

<h2>Visualized Software Metrics</h2>
<h2 *ngIf="domain?.catergory">Domain: {{ domain.catergory | uppercase }}</h2>
<h2 *ngIf="library?.name">Library: {{ library.name | uppercase }}</h2>
<div class = "row">
  <ul id = "thumbnailslist">
    <li *ngFor="let image  of visibleImages ">
      <a [routerLink] = "['/image', image.id]">
        <img src = "{{image.url}}" class = "tn">
      </a>
    </li>
  </ul>
</div>
<app-metric-view [domain] = "domain"></app-metric-view>

This is the corresponding .ts file(metric-details.component.ts)

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { ImageService } from './shared/image.service';
import { DomainService } from '../domain.service';
import { GraphService } from '../graph.service';
import { LibraryService } from '../library.service';
import { Domain } from '../library';
import { Library } from '../library';
import { map,mergeMap } from 'rxjs/operators';


@Component({
  selector: 'app-metric-details',
  templateUrl: './metric-details.component.html',
  styleUrls: ['./metric-details.component.css']

})
export class MetricDetailsComponent implements OnInit {

  visibleImages: any[] = [];
  activeId = 0;
  domain: Domain[];

  constructor(private imageService: ImageService, private domainService: DomainService, private libraryService:LibraryService, private graphService:GraphService, private location: Location, private route: ActivatedRoute,  private router: Router) {
    this.visibleImages = this.imageService.getImages();

}

  ngOnInit() {
    this.route.params.subscribe(params => { {this.activeId = +params['id'];
    console.log(this.activeId) //log the entire params object
    // console.log(params['id']) //log the value of id
    // const id = +this.route.snapshot.paramMap.get('id');
    // console.log(id);
    console.log(this.domainService.getDomain(this.activeId));
    this.domainService.getDomain(this.activeId).subscribe(domain =>this.domain = domain)
    console.log("YOOO",this.domain)

  }

This is my child component(metric-views.component.html) where I'm trying to get the id number that is stored in parent component in the variable domain

<div *ngIf="image">
  <h2>{{ image.catergory | uppercase }}</h2>
<div>

  <div *ngIf = "domain.id === 1" class ="row" >
    <button (click)="prev()" class="previous round">&#8249;</button>
      <div  [ngStyle] = "{'background-image': 'url('+ testing.url +')'}" class ="img-container">
      </div>
    <button (click)="next()" class="next round">&#8250;</button>
  </div>


  <div class ="row" >
      <button (click)="prev()" class="previous round">&#8249;</button>
      <div  [ngStyle] = "{'background-image': 'url('+ testing.url +')'}" class ="img-container">
      </div>
      <button (click)="next()" class="next round">&#8250;</button>
  </div>

</div>

<div class = "tab-rating">
  <ngbd-rating-template></ngbd-rating-template>
  <ngbd-tabset-basic></ngbd-tabset-basic>
</div>

This is the corresponding .ts file for the metric-view.component

import { Component, OnInit, Input} from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { ImageService } from '../metric-details/shared/image.service';
import { LibraryService } from '../library.service';
import { Library } from '../library';
import { Domain } from '../library';
import { GraphService } from '../graph.service';
import { DomainService } from '../domain.service';
import { map,mergeMap } from 'rxjs/operators';

@Component({
  selector: 'app-metric-view',
  templateUrl: './metric-view.component.html',
  styleUrls: ['./metric-view.component.css']
})
export class MetricViewComponent implements OnInit {
image: any;
testing: any;
visibleImages: any[] = [];



@Input() domain: any[];
// activeId = 0;



  constructor(private imageService: ImageService, private libraryService:LibraryService, private domainService: DomainService, private graphService:GraphService, private location: Location, private route: ActivatedRoute, private router: Router) {
    this.visibleImages = this.imageService.getImages();
   }

  ngOnInit() {
    this.testing =  this.graphService.getTestingGraphs(domain.id);
    console.log(this.testing);
    this.image = this.imageService.getImage(domain.id);
    console.log(this.image);
}

  next() {
    // const next = this.activeId + 1 >= this.image.length - 1  ? this.graph.length - 1 : this.activeId + 1;
    const next = this.activeId + 1 >= 9  ? 1 : this.activeId + 1;
    this.router.navigate(['/image/' + next]);
  }

  prev() {
    const prev = this.activeId - 1 < 1 ? 9 : this.activeId - 1;
    this.router.navigate(['/image/' + prev]);
  }

}