Question

我在数组域中存储了一些值：Domain []，如果我想通过使用父亲html文件中的子选择器将数组从父组件转移到子组件，然后声明装饰器@Input （）domain：Domain [];在我的孩子的组件中获取数组内的内容我是否可以使用domain.id如果我想在我孩子的组件中的函数内？我只是很难掌握这个概念。

这是stackblitz文件：https://stackblitz.com/github/pennyfea/Project3-HCI

这是我的父组件，我将初始数据存储在数组中。然后我会尝试使用父级html文件中的子选择器将其传递给子组件。我在其他一些问题和教程中看到的东西。

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("Added",this.domain);});
      this.domainService.getDomain(this.activeId).subscribe(domain => {this.domain = domain; console.log(this.domain);})
    }
  }

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

这是我孩子的组件，我希望使用输入装饰器从父组件中获取信息，然后使用数组中的信息说明函数中的domain.id。

<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>



<!-- <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> -->

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: Domain[];


  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]);
  }

}

Answer 1

Live working example。错误是当您单击指标视图组件时，您不再使用嵌套组件通信，而是使用路由将该域传递给该组件。

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

当您点击该图片时，由于此行 metric-details.component.html （顺便说一句，您将其注释掉），该组件无法渲染

<app-metric-view [domain] = "domain"></app-metric-view>

由于Angular rounting的魔力，它正在渲染：

<a [routerLink] = "['/image', image.id]">
  <img src = "{{image.url}}" class = "tn">
</a>

由于image.id拥有您需要的数据，因此您可以通过这种方式访问该信息：

this.route.params.subscribe((domain: Domain) => {
  this.domain = domain;
});

Answer 2

你有很多代码，但是练习不是使用构造函数来做事情，而是使用OnInit来调用服务并获取图像。

Answer 3

stackblitz示例项目有两个语法问题。在app/dashboard/dashboard.component.ts中，您的类声明从未终止（可能会使ngOnInit的右括号与该类的右括号混淆）。解决了这个问题：

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  domain = DOMAIN;
  constructor(
    private location: Location, 
    private route: ActivatedRoute, 
    private router: Router
  ) { }

  ngOnInit() { } 
}

然后清除metric-details.component.ts中的类似语法问题。这里有version of your stackblitz作为参考，清理了那些错误。如果它仍然与你想要完成的工作有所不同，那么拥有一个工作样本将更好地指导那些愿意帮助的人。

数组，组件之间共享：Angular

3 个答案: