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

【问题标题】：Angular2, auto update variable in multiple componentsAngular2，多个组件中的自动更新变量
【发布时间】：2018-02-11 19:05:55
【问题描述】：

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

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.ts

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

    choosenModels: string = 'test';

    constructor(private _modelsService: ModelsService) {}

    ngOnInit() {

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


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

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.ts：

@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);
    }

}

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

【解决方案1】：

providers: [ 
    ModelsService,
]

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

其他问题：

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

【讨论】：