Angular2，多个组件中的自动更新变量

我的服务中有变量“ChooseModels”，它用于两个组件：app.component和他的子组件gallery.component。当我点击按钮时，这应该会改变“ChooseModels”的值，但这种改变只在他自己的组件中看到。如何使其对其他组件可见？以下是代码：

Models.service.ts：

@Injectable()
export class ModelsService {

    private _choosenModels: string = 'female';
    _choosenModelsUpdate = new EventEmitter<string>();

    getChoosenModels() {
        return this._choosenModels;
    }
    setChoosenModels(value: string) {
        this._choosenModels = value;
        this._choosenModelsUpdate.emit(this._choosenModels);
    }
}

App.component.html：

<nav class="footer__nav">
    <button
        class="button" 
        (click)="onChangeModelsTeamClick('female')"
    >
        <div class="button__description">Modelki</div>
        <i class="button__sign button__sign--female"></i>
    </button>
    <button 
       class="button button--male" 
       (click)="onChangeModelsTeamClick('male')"
    >
        <i class="button__sign button__sign--male"></i>
        <div class="button__description button__description--male">Modele</div>
    </button>
</nav>

gallery.component.html：

<nav class="navigation">
    <button 
        class="button" 
        (click)="onChangeModelsTeamClick('female')"
        [ngClass]="{'active': choosenModels=='female'}" 
    >
        MODELKI
    </button><!--
 --><button 
        class="button"
        (click)="onChangeModelsTeamClick('male')"
        [ngClass]="{'active': choosenModels=='male'}" 
    >
        MODELE
    </button><!--
 --><button 
        class="button"
        (click)="onChangeModelsTeamClick('premium')"
        [ngClass]="{'active': choosenModels=='premium'}" 
    >
        PREMIUM
    </button>
</nav>

莫德基
莫代尔
溢价

这告诉Angular创建一个专用于该组件实例（及其子组件，递归）的每个f的ModelsService实例。因为您的两个组件都有这个功能，所以它们都有自己的服务实例

其他问题：

• choosen

  应选择

• 不要在服务中使用EventEmitter。这应仅用于组件输出。使用RxJS主题
• 您甚至不需要任何事件：您可以在组件上简单地使用getter直接返回存储在服务中的值，而不是在3个不同的位置拥有相同信息的三个副本

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

    choosenModels: string;    


    constructor(private _modelsService: ModelsService) {}
    ngOnInit() {

        this.choosenModels = this._modelsService.getChoosenModels();
        this._modelsService._choosenModelsUpdate.subscribe(
            (choosenModels) => {
                this.choosenModels = this._modelsService.getChoosenModels();
            }
        );        
    }

    onChangeModelsTeamClick(value: string) {
        this._modelsService.setChoosenModels(value);
    }

}

<nav class="navigation">
    <button 
        class="button" 
        (click)="onChangeModelsTeamClick('female')"
        [ngClass]="{'active': choosenModels=='female'}" 
    >
        MODELKI
    </button><!--
 --><button 
        class="button"
        (click)="onChangeModelsTeamClick('male')"
        [ngClass]="{'active': choosenModels=='male'}" 
    >
        MODELE
    </button><!--
 --><button 
        class="button"
        (click)="onChangeModelsTeamClick('premium')"
        [ngClass]="{'active': choosenModels=='premium'}" 
    >
        PREMIUM
    </button>
</nav>

providers: [ 
    ModelsService,
]