Angular 角度2：组件不'；t更新

我正在构建一个关于我所做的一些项目的角度应用程序。我有一个显示项目细节的详细页面

问题： 当我进入项目详细信息页面时，一切都是正确的。 但是当我切换项目变量时（通过使用我在页面上的导航），依赖项组件不会更新，它们不会获得正确的项目ID

包含所有组件的projectdetail.html页面：

<div class="container-content" *ngIf="project">
    <div class="projectdetail">
        <div class="thumbnail header">
            <img [src]="project.img" [alt]="project.name" class="projectImage" />
            <div>
                <h2>{{project.name}}</h2>
                <!--The programming component that you can see in the image-->
                <programming-languages [ids]="project.languages"></programming-languages>
            </div>
        </div>
        <div>
            <carousel interval="5000" noWrap="false">
                <slide *ngFor="let slidez of slides; let index=index">
                    <img [src]="slidez.image" class="carouselimg" />
                    <div class="carousel-caption">
                        <h4>Slide {{slidez.id}}</h4>
                        <p>{{slidez.text}}</p>
                    </div>
                </slide>
             </carousel>
        </div>
        <div class="thumbnail detail">
            <p>{{project.description}}</p>
        </div>
    </div>
    <div class="projects hidden-mm hidden-sm hidden-xs">
        <projectsidelist [notShowId]="selectedProjectId"></projectsidelist>
    </div>
</div>

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

import { ProgrammingLanguagesService } from '../services/programminglanguages.service';
import { ProgrammingLanguage } from '../models/programmingLanguage';

@Component({
    selector: 'programming-languages',
    templateUrl: 'app/components/programminglanguages.component.html',
    providers: [ProgrammingLanguagesService]  
})
export class ProgrammingLanguages implements OnInit {
    @Input()
    ids: number[];
    programmingLanguages: ProgrammingLanguage[];
    constructor(private programmingLanguagesService: ProgrammingLanguagesService) {

    }

    getProgrammingLanguages() {
        this.programmingLanguagesService.getProgrammingLanguages().subscribe(programmingLanguages => {
            var result: ProgrammingLanguage[] = [];
            this.ids.forEach((key: number) => {
                programmingLanguages.forEach((programmingLanguage: ProgrammingLanguage) => {
                    if (programmingLanguage.id == key)
                    {
                        result.push(programmingLanguage);
                    }
                })
            })       
            this.programmingLanguages = result;
        });
    }

    ngOnInit() {
        setTimeout(() => this.getProgrammingLanguages(), 0);
    }
}

<div class="languageoverlay">
    <span *ngFor="let programmingLanguage of programmingLanguages; let lastElement = last">
        <img [src]="programmingLanguage.img" [alt]="programmingLanguage.name" />
        <span [hidden]="lastElement" class="languageseperator">+</span>
    </span>
</div>

编程语言html:

<div class="container-content" *ngIf="project">
    <div class="projectdetail">
        <div class="thumbnail header">
            <img [src]="project.img" [alt]="project.name" class="projectImage" />
            <div>
                <h2>{{project.name}}</h2>
                <!--The programming component that you can see in the image-->
                <programming-languages [ids]="project.languages"></programming-languages>
            </div>
        </div>
        <div>
            <carousel interval="5000" noWrap="false">
                <slide *ngFor="let slidez of slides; let index=index">
                    <img [src]="slidez.image" class="carouselimg" />
                    <div class="carousel-caption">
                        <h4>Slide {{slidez.id}}</h4>
                        <p>{{slidez.text}}</p>
                    </div>
                </slide>
             </carousel>
        </div>
        <div class="thumbnail detail">
            <p>{{project.description}}</p>
        </div>
    </div>
    <div class="projects hidden-mm hidden-sm hidden-xs">
        <projectsidelist [notShowId]="selectedProjectId"></projectsidelist>
    </div>
</div>

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

import { ProgrammingLanguagesService } from '../services/programminglanguages.service';
import { ProgrammingLanguage } from '../models/programmingLanguage';

@Component({
    selector: 'programming-languages',
    templateUrl: 'app/components/programminglanguages.component.html',
    providers: [ProgrammingLanguagesService]  
})
export class ProgrammingLanguages implements OnInit {
    @Input()
    ids: number[];
    programmingLanguages: ProgrammingLanguage[];
    constructor(private programmingLanguagesService: ProgrammingLanguagesService) {

    }

    getProgrammingLanguages() {
        this.programmingLanguagesService.getProgrammingLanguages().subscribe(programmingLanguages => {
            var result: ProgrammingLanguage[] = [];
            this.ids.forEach((key: number) => {
                programmingLanguages.forEach((programmingLanguage: ProgrammingLanguage) => {
                    if (programmingLanguage.id == key)
                    {
                        result.push(programmingLanguage);
                    }
                })
            })       
            this.programmingLanguages = result;
        });
    }

    ngOnInit() {
        setTimeout(() => this.getProgrammingLanguages(), 0);
    }
}

<div class="languageoverlay">
    <span *ngFor="let programmingLanguage of programmingLanguages; let lastElement = last">
        <img [src]="programmingLanguage.img" [alt]="programmingLanguage.name" />
        <span [hidden]="lastElement" class="languageseperator">+</span>
    </span>
</div>

+

如果需要额外代码，请询问或参考github

Github包含

---

运行github时的说明：转到

http://localhost:3000/#/projectdetail/5

然后单击左侧栏上的另一个项目。那你就明白了

您正确地向组件传递了一个id数组，但您从未听过所做的更改，因此有一个快速修复：

在programminglanguages.component.ts中，更改以下代码：

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

到

从'@angular/core'导入{Component，Input，OnInit，OnChanges}；

及

到

最后，将此生命周期函数添加到类主体：

 ngOnChanges(): void {
        this.getProgrammingLanguages();
    }

---

您正确地向组件传递了一个id数组，但您从未听过所做的更改，因此有一个快速解决方案：

在programminglanguages.component.ts中，更改以下代码：

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

到

从'@angular/core'导入{Component，Input，OnInit，OnChanges}；

及

到

最后，将此生命周期函数添加到类主体：

 ngOnChanges(): void {
        this.getProgrammingLanguages();
    }

---

---

你能提供更多的代码吗？我明天会做的！：）@AlexanderCiesielski我添加了所有的代码和图像这只是一个没有更新的图像？@FabioAntunes是的，只是一个没有正确更新的图像你能提供更多的代码吗？我明天会做的！）@AlexanderCiesielski我添加了所有的代码和图像只是图像没有更新？@FabioAntunes是的只是图像没有正确更新为什么你要导入

SimpleChanges

，如果你不使用它？这只是更改的类型声明，可能对他来说不是必需的，所以他可以不带参数离开。我在检查值时留下了它：）@MatWaligora我今晚会检查它，希望它能工作：）我从github下载了你的代码并检查了它，为我工作，但正如你所知，“奇怪，它在我的电脑上工作”随时可能发生。如果需要，请告诉我helped@MatWaligora它实际上工作得很好：）Thx你得了50分XD为什么你不使用它就导入

SimpleChanges

？这只是更改的类型声明，他可能不需要，这样他就可以不用参数了。我在检查值时留下了它：）@MatWaligora我今晚会检查它，希望它能工作：）我从github下载了你的代码并检查了它，为我工作，但正如你所知，“奇怪，它在我的电脑上工作”随时可能发生。如果需要，请告诉我helped@MatWaligora它实际上工作得很好：）Thx你赢得了50分xD