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

Posted 2021-05-06

我试图将我存储在我的一个组件中的值传递给另一个组件，以便我的新组件可以使用我原来的选定值。现在我有一个文件如下：

符号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() {
  }

}

我在html中设置'selectionChoice'的值如下：

符号picker.component.html

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

我想将'selectionChoice'中保存的值传递给新文件以使用它。例如，我正试图在此文件中获取值：

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

如何在symbolPicker.ts中将我新声明的'symbolSelected'变量设置为symbol-picker.component.ts中selectionChoice的值？我最终尝试这样做，所以在我的editor.components.ts文件中，我可以在symbolPicker中为我的'selector'部分引用这个值，如下所示：

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

我的想法是，当我按下按钮在'equals'和'implies'之间切换时，这个选择器值会动态变化。

答案

有许多方法可以在组件之间共享数据。对于您的特定情况，您最好的选择是服务。构建服务以保留您要共享的值。

然后将服务注入任何需要设置值或读取值的组件。

我在这里有一个例子：https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

在我的情况下，我分享当前选定的电影。以下是我的代码的一些片段。 （有关完整的代码示例，请参阅上面的URL。）

电影服务：

@Injectable()
export class MovieService {

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

电影列表组件

在此组件中，用户选择一部电影：

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

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

电影细节组件

在此组件中，当用户在“影片列表”组件中选择不同的影片时，绑定会自动更改。

UI绑定到下面组件中定义的movie属性。

export class MovieDetailComponent {

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

    constructor(private movieService: MovieService) {}
}

当currentMovie在服务中发生变化并重新绑定值时，Angular的变化检测跟踪，调用上面显示的getter，并获取currentMovie的当前值。