Angular 9 - 使用服務將數據傳遞給子組件 - 錯誤類型錯誤：無法讀取未定義的屬性“名稱”

Question

我正在學習 Angular 並堅持將數據傳遞給子組件。 我使用了幾種不同的方法，但一直卡住。 我有一個關於portfolio.component.ts（父）的列表，理想情況下會路由到project.component.ts（子） ，傳遞被點擊項目的數據。

項目.service.ts：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Project } from './project.model';

@Injectable({
  providedIn: 'root',
})

export class ProjectService {

    projects: Project[] = [
        new Project('Acme', 'Acme website description', '/assets/img/kitten.jpg', 'acme tag', 'acme', 'acmemfgco.com'),
        new Project('Kyle Whitaker', 'Fort Worth, Texas Attorney', '/assets/img/kyle-whitaker.png', 'kyle w tag', 'kyle-whitaker', 'kwhitaker.com')
    ];

    getProjects(): Observable<Project[]> {
        return of(this.projects);
    };
    
}

投資組合.component.ts（父）：

import { Component, OnInit } from '@angular/core';
import { Project } from './project/project.model';
import { ProjectService } from './project/project.service';

@Component({
  selector: 'app-portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.scss'],
  providers: [ProjectService]
})
export class PortfolioComponent implements OnInit {
  projects: Project[];

  constructor(private projectService: ProjectService) { }

  ngOnInit(): void {
    this.projectService.getProjects().subscribe(projects => this.projects = projects);
  }
}

投資組合.組件.html：

<div class="container projects">
    <div class="row">
        <div class="col-md-12">
            <a [routerLink]="['project', project.slug ]" *ngFor="let project of projects">
                <div class="project">
                <div class="outside">
                  <div class="inside"><img style="width: 500px;" [src]="project.imagePath" alt="{{ project.name }}" class="project-image img-responsive"/></div>
                </div>
            
                    <div class="{{ project.cssClass }} text">
                        <h2> {{ project.name }} </h2>
                        <p class="project-tag"> {{ project.tag }} </p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

project.component.ts（子）：

import { Component, Input, OnInit } from '@angular/core';
import { Project } from './project.model';

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

  @Input() project: Project;

  constructor() { }

  ngOnInit(): void {
    
    console.log(this.project); //undefined ?

  }

}

項目.component.html：

 <div class="container">
    <h1>{{ project.name }}</h1>
 </div>

ERROR TypeError: Cannot read property 'name' of undefined

app-routing.module.ts（片段）：

const appRoutes: Routes = [
    { path: '', component: IndexComponent },
    { path: 'portfolio', component: PortfolioComponent },
    { path: 'portfolio/project/:slug', component: ProjectComponent },
    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent }
];

Answer 1

當您使用路由參數時，您可以在項目頁面加載時從 URL 中取出slug

 { path: 'portfolio/project/:slug', component: ProjectComponent },

然后您可以使用您的服務過濾您的項目以找到與 slug 匹配的項目，並返回完整的項目以在您的組件中使用（例如，如果您有一個名為getProjectBySlug的 function ）

export class ProjectComponent implements OnInit {
  project: Project;
  constructor(private route: ActivatedRouteSnapshot) { }
  ngOnInit(): void {
    const slug = this.route.paramMap.get('slug');
    this.project = this.projectService.getProjectBySlug(slug)
  }
}

您可以在angular 文檔中看到更多示例