Angular组件传值问题：建筑公司网站项目列表与详情联动实现

Hey there! Since you're new to Angular and building this site for a construction company, let's break down exactly how to get that project detail switching working—it's a super common pattern, and once you get the hang of component communication, it'll feel straightforward.

We'll use Angular's core component communication tools (@Input and @Output) since your projects and projectdetail components are likely siblings sharing a parent component (like a dashboard or home page). Here's the step-by-step:

First, create a type-safe interface to represent your construction projects. This keeps your data consistent across components.

// src/app/models/project.model.ts
export interface Project {
  id: number;
  name: string;
  description: string;
  location: string;
  images?: string[]; // Optional: for project photos
  completionDate?: string; // Optional: add fields relevant to your client
}

Your parent component will act as the middleman—it holds the state of the selected project and passes data between the two child components.

Parent Component TypeScript #

// src/app/parent/parent.component.ts
import { Component } from '@angular/core';
import { Project } from '../models/project.model';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  selectedProject?: Project;

  // This method receives the selected project from the projects component
  onProjectSelected(project: Project) {
    this.selectedProject = project;
  }
}

Parent Component Template #

Use flexbox to create your left-right layout:

<!-- src/app/parent/parent.component.html -->
<div class="page-layout">
  <!-- Left: Project Detail Section -->
  <div class="detail-panel">
    <app-project-detail [project]="selectedProject"></app-project-detail>
  </div>

  <!-- Right: Project List Section -->
  <div class="list-panel">
    <app-projects (projectSelected)="onProjectSelected($event)"></app-projects>
  </div>
</div>

Parent Component CSS #

Quick layout styling:

/* src/app/parent/parent.component.css */
.page-layout {
  display: flex;
  gap: 2rem;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.detail-panel {
  flex: 1; /* Takes 1 part of the available space */
}

.list-panel {
  flex: 1; /* Adjust this ratio if you want one panel wider than the other */
}

This component will display your project list and emit an event when a project is clicked.

Projects Component TypeScript #

// src/app/projects/projects.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
import { Project } from '../models/project.model';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css']
})
export class ProjectsComponent {
  @Output() projectSelected = new EventEmitter<Project>();
  selectedProjectId?: number; // Track selected item for styling

  // Mock project data—replace this with data from an API later!
  projects: Project[] = [
    {
      id: 1,
      name: 'Downtown Office Tower',
      description: '25-story LEED-certified office building with sustainable materials',
      location: 'Metro City, Downtown'
    },
    {
      id: 2,
      name: 'Suburban Residential Complex',
      description: '120-unit luxury apartments with community green spaces',
      location: 'Maplewood Suburbs'
    },
    // Add more construction projects here
  ];

  selectProject(project: Project) {
    this.selectedProjectId = project.id;
    this.projectSelected.emit(project); // Send the selected project to parent
  }
}

Projects Component Template #

<!-- src/app/projects/projects.component.html -->
<h3>Our Construction Projects</h3>
<ul class="project-list">
  <li 
    *ngFor="let project of projects" 
    (click)="selectProject(project)"
    [class.active]="project.id === selectedProjectId"
  >
    <h4>{{ project.name }}</h4>
    <p class="location">{{ project.location }}</p>
  </li>
</ul>

Projects Component CSS #

Add hover/active styling for better UX:

/* src/app/projects/projects.component.css */
.project-list {
  list-style: none;
  padding: 0;
}

.project-list li {
  padding: 1rem;
  border: 1px solid #e0e0e0;
  margin-bottom: 0.75rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.project-list li:hover {
  background-color: #f5f5f5;
}

.project-list li.active {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

.location {
  color: #666;
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
}

This component receives the selected project via @Input and displays its details.

Project Detail Component TypeScript #

// src/app/project-detail/project-detail.component.ts
import { Component, Input } from '@angular/core';
import { Project } from '../models/project.model';

@Component({
  selector: 'app-project-detail',
  templateUrl: './project-detail.component.html',
  styleUrls: ['./project-detail.component.css']
})
export class ProjectDetailComponent {
  @Input() project?: Project; // Receive selected project from parent
}

Project Detail Component Template #

Handle the case where no project is selected yet:

<!-- src/app/project-detail/project-detail.component.html -->
<div class="detail-card" *ngIf="project; else noProject">
  <h2>{{ project.name }}</h2>
  <p class="detail-location"><strong>Location:</strong> {{ project.location }}</p>
  <p class="detail-description">{{ project.description }}</p>
  <!-- Add more fields here (images, completion date, etc.) as needed -->
</div>

<ng-template #noProject>
  <div class="empty-state">
    <p>Select a project from the right to view its details.</p>
  </div>
</ng-template>

Project Detail Component CSS #

/* src/app/project-detail/project-detail.component.css */
.detail-card {
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: #fff;
}

.detail-card h2 {
  color: #2c3e50;
  margin-top: 0;
}

.detail-location {
  color: #7f8c8d;
  font-style: italic;
}

.detail-description {
  margin-top: 1rem;
  line-height: 1.5;
}

.empty-state {
  padding: 2rem;
  text-align: center;
  color: #666;
  border: 1px dashed #ccc;
  border-radius: 6px;
}

• Fetch Data from an API: Replace the mock projects array with data from a backend service using Angular's HttpClient.
• Add Loading States: If fetching data, add spinners to improve UX.
• Enhance the Detail View: Add image carousels for project photos, or timelines for construction phases—perfect for a construction company site!

内容的提问来源于stack exchange，提问作者Alex Marvick