Angular5：将变量从一个组件传递到另一个打字稿文件

Question

I am trying to pass the value I am storing in one of my components to another component so that my new component can use the selected value from my original. Right now I have a file as follows:

symbol-picker.component.ts

 import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-symbol-picker', templateUrl: './symbol-picker.component.html', styleUrls: ['./symbol-picker.component.scss'] }) export class SymbolPickerComponent implements OnInit { selectionChoice: string; equalsTxt = '='; impliesTxt = '=>'; constructor() { } ngOnInit() { } } 

Where I am setting the value of 'selectionChoice' in my html as follows:

symbol-picker.component.html

 <button (click)="selectionChoice = 'equals'">{{equalsTxt}}</button> <button (click)="selectionChoice = 'implies'">{{impliesTxt}}</button> 

I want to pass the value held in 'selectionChoice' to a new file to use it. For instance I am trying to get the value right now in this file:

symbolPicker.ts

 import {SymbolPickerComponent} from '../symbol-picker/symbol-picker.component'; export interface Config { container: string; selector: 'equals'|'implies'|'followsFrom'; } export interface QuillInstance { on: Function; getText: Function; } export default class SymbolPicker { symbolSelected = SymbolPickerComponent.selectionChoice; quill: QuillInstance; options: Config; constructor(quill, options) { this.quill = quill; this.options = options; const container = document.querySelector(this.options.container); switch (this.options.selector) { case 'equals': { container.addEventListener('click', function() { console.log('FRANK: EQUALS PRESSED'); quill.insertText(quill.getSelection(), '\\n= 〈 〉'); }); break; } case 'implies': { container.addEventListener('click', function() { console.log('FRANK: IMPLIES PRESSED'); quill.insertText(quill.getSelection(), '\\n=> 〈 〉'); }); break; } default: { console.log('FRANK: selectionChoice set to non-understood value'); break; } } } } 

How can I set my newly declared 'symbolSelected' variable in symbolPicker.ts to the value of selectionChoice in symbol-picker.component.ts? I am ultimate trying to do this so in my editor.components.ts file I can reference this value as well for my 'selector' section in symbolPicker as follows:

 this.modules = { formula: true, toolbar: true, counter: { container: '#counter', unit: 'word' }, symbolPicker: { container: '#symbolCounter', selector: this.symbolSelected } }; 

The idea would be that this selector value would dynamically change as I press the buttons to change between 'equals' and 'implies'.

Answer 1

There are many ways to share data between components. For your particular scenario, your best choice is a service. Build a service to retain the value(s) that you want to share.

Then inject the service into any component that needs to set the value or read the value.

I have an example here: https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

In my case, I share the currently selected movie. Below are some snippets of my code. (See the above URL for the complete code example.)

Movie service:

@Injectable()
export class MovieService {

    currentMovie: IMovie | null;
    // Other code here.
}

Movie List component

In this component, the user selects a movie:

export class MovieListComponent {
    constructor(private movieService: MovieService) { }

    onSelected(movie: IMovie): void {
        this.movieService.currentMovie = movie;
    }
    // Other code here
}

Movie Detail component

In this component, the bindings change automatically when the user selects a different movie in the Movie List component.

The UI is bound to the movie property defined in the component below.

export class MovieDetailComponent {

    get movie(): IMovie | null {
        return this.movieService.currentMovie;
    }

    constructor(private movieService: MovieService) {}
}

Angular's change detection tracks when the currentMovie changes in the service and rebinds the values, calling the getter shown above, and getting the current value of the currentMovie .