为什么当数组的添加来自另一个组件时 ngFor 不更新？

Question

我在这方面已经有一段时间了，很多文章，文档，很多试验和错误，但我觉得我错过了一些核心。

本质上，我正在尝试创建一个可扩展的导航组件，其他组件可以在将项目添加到页面时向其中添加项目。我已经尝试通过几种方式来实现这一点，包括服务，这个例子我试图通过将一个组件注入另一个组件来尝试它。

我有一个包含项目列表的组件，我有一个 ngFor 循环遍历项目并显示文本。我在页面上有一个按钮，当您单击该按钮时，会将一个项目添加到数组中。我还将组件注入到另一个组件中，我在 NgOnInit() 上向数组中添加了一个项目（尝试了其他生命周期事件并在构造函数中）。

奇怪的是，当按钮将项目添加到数组时，列表会更新，但是当其他组件添加项目时，列表不会更新 UI，即使项目数增加，我可以在 UI 中看到该组件具有已经加载并呈现了默认项目。

import {Component} from 'angular2/core'; 
import {Router, RouteParams} from 'angular2/router'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {Injectable} from 'angular2/core';

@Component({
    selector: 'caseBasedSearchSidebar',
    template: `<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav">
                  <li *ngFor="#nav of navigationItems">
                    <span>{{nav.name}}</span>
                  </li>
           <ul>  <button (click)=addNavigationItem()>Add</button> `,
directives: [ROUTER_DIRECTIVES] })

@Injectable() export class SidebarComponent {
    public navigationItems: Array<ISideNavigationItem>;

    constructor() {
        this.navigationItems = [{ name: 'test' }];
    }

    public addNavigationItem(item: ISideNavigationItem) {
        this.navigationItems.push({ name: 'test' });
    } 
}

export interface ISideNavigationItem {
name: string; }

import {Component, OnInit} from 'angular2/core'; 
import {SidebarComponent} from '../sideBar.component';

@Component({
    templateUrl: '/CaseBasedSearch/PatientInformation',
    providers: [SidebarComponent] 
})
export class PatientInformationComponent implements OnInit {
    private sideBarComponent: SidebarComponent;

    constructor(sideBarComponent: SidebarComponent) {
        this.sideBarComponent = sideBarComponent;
    }

    ngOnInit() {
        this.sideBarComponent.addNavigationItem({ name: 'testing' });
    } 
}

任何指导表示赞赏。

Answer 1

也许您应该删除组件@Injectable的装饰器SidebarComponent并只保留一个@Component。

希望它对你有帮助，蒂埃里