Angular - 将数据传递给组件

Question

我对 Angular 开发还有些陌生。

我正在为一家建筑公司建立一个网站，我在一个页面上使用了三个不同的组件。以下是该页面当前拥有的内容以及我希望它做什么的基本大纲：

• 项目组件包含右侧的项目列表 的页面。在所有这些项目中，被选中的项目 显示在页面左侧 (projectdetail.component.html)

• 用户可以单击页面右侧的任何项目来更改所选项目。这个新的将显示在页面左侧的 projectdetail.component.html

• 在 projectdetail 组件中，有一个其他的迷你画廊 用户可以单击以更改主图像的图像 显示（就像典型的照片幻灯片）。

• 我现在遇到的问题：当我单击右侧的任何项目时，projectdetail.component 中的主图像不再改变面板（所有其他数据，包括地址、幻灯片中的图像等，都会按应有的方式更新）；只有当我单击 projectdetail 组件中图库中的任何图像时，它们才会发生变化。我提出的一个解决方案是在您单击右侧面板上的项目时尝试更新“mainImage”（参见下面的代码），但它不会这样做。我不知道如何做到这一点。

我的项目类：

export class Project {
    id: number;
    address: string;
    images: string[];
    price: string;
    featured: boolean;
    description: string;
}

我的项目服务：

import { Injectable } from '@angular/core';
import { Project } from '../shared/project';
import { PROJECTS } from '../shared/projects';

@Injectable()

export class ProjectService {

  constructor() { }

  getProjects(): Project[] {
    return PROJECTS;
  }

  getProject(id: number): Project {
    return PROJECTS.filter((project) => (project.id === id))[0];
  }

}

不包括与问题无关的组件之一，它们如下：

projects.component.html

<div class="container"
  fxLayout.sm="row"
  fxLayout.xs="column">  

  <div fxFlex=60>
    <app-projectdetail [project]="selectedProject" ></app-projectdetail> 
  </div> 

  <div fxFlex=40 *ngIf="projects">
    <mat-grid-list cols="1" rowHeight="300px">
      <mat-grid-tile *ngFor="let project of projects" (click)="onSelect(project)">
        <img src="{{ project.images[0] }}">
        <mat-grid-tile-footer>
          <h1 mat-line ngDefaultControl>{{ project.address | uppercase }}</h1>
        </mat-grid-tile-footer>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>

projects.component.ts

import { Component, OnInit, Inject, Optional } from '@angular/core';
import { MatDialog } from '@angular/material';

import { ProjectDialogComponent } from '../project-dialog/project-dialog.component';

import { Project } from '../shared/project';
import { ProjectService } from '../services/project.service';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})

export class ProjectsComponent implements OnInit {
  projects: Project[];
  selectedProject: Project;
  image: String;
  mainImage: String;

  constructor(private projectService: ProjectService, private dialog: MatDialog) { }

  ngOnInit() {
    this.projects = this.projectService.getProjects();
    this.selectedProject = this.projectService.getProject(0);
  }

  onSelect(project: Project) {
    this.selectedProject = project;
    this.mainImage = project.images[0];
  }

}

projectdetail.component.html

<div class="container"
  fxLayout="row"
  fxLayoutGap="10px">

  <div fxFlex=100>
    <mat-card *ngIf="project">
      <img src="{{ mainImage }}" (click)="openDialog(project)">
      <mat-card-header>
        <mat-card-title><h1>{{ project.address | uppercase }}</h1></mat-card-title>
      </mat-card-header>
      <div id="preWrapper">
        <div id="imageWrapper">
          <div id="imageContainer" *ngFor="let image of project.images">
            <img src="{{ image }}" (click)="changeImage(image)" />
          </div>
        </div>
      </div>
      <mat-card-content>
        <p>{{ project.description }}</p>
      </mat-card-content>
    </mat-card>
  </div>
</div>

projectdetail.component.ts

import { Component, OnInit, Inject, Input } from '@angular/core';
import { MatDialog } from '@angular/material';

import { ProjectDialogComponent } from '../project-dialog/project-dialog.component';

import { Project } from '../shared/project';
import { ProjectService } from '../services/project.service';

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

  @Input()
  project: Project;
  projects: Project[];
  selectedProject: Project;
  image: String;
  mainImage: String;

  constructor(private projectService: ProjectService, private dialog: MatDialog) { }

  ngOnInit() { 
    this.mainImage = this.projectService.getProject(0).images[0];
  }

  openDialog(project: Project): void {
    let dialogRef = this.dialog.open(ProjectDialogComponent, {
      data: {
        address: this.project.address,
        images: this.project.images
      }
    })
  }

  changeImage(image: String) {
    this.mainImage = image;
  }

}

Answer 1

您在详细信息组件中编写ngOnChange 事件，然后在您的主页中引发更改图像的事件，

 ngOnChanges(changes: SimpleChanges) {
    for (let propName in changes) {  
        if (propName === 'project') {
           Promise.resolve(null).then(() => 
                {raise event or write code toc hange main page image});
        }
    }
}