Использовать переменную одного компонента в другом компоненте в том же файле

Question

У меня есть два компонента, определенные в одном файле, и я пытаюсь получить доступ к одной переменной компонента в другой, и получил этот ответ, но get SomeValue() функция не отображается в другом классе, когда я пытаюсь обратиться к нему.

Ответ дан по указанной ссылке:

export class Demo {
const sum = 10;

get SumValue() {
    return this.sum;
}
}

импорт -> Демо-версия

export class Demo2 {
   private sum: number;
   this.sum = Demo.SumValue();
}

Я могу использовать общий сервис, но не хочу использовать его только для одной переменной.

Что-то я упускаю из этого ответа?

Answer 1

Это называется Component Interaction

вам нужно использовать @Input за это.

Если свойство, которое вы хотите передать ребенку, меняется асинхронно, вам необходимо использовать EventEmitter

проверьте эту ссылку для справки

Вот простой пример:

Дочерний компонент

import { Component, Input  } from '@angular/core';

@Component({
    selector: 'child-component',
    template: `<h2>Child Component</h2>
               current count is {{ count }}
    `
})
export class ChildComponent {
    @Input() count: number;
}

Родительский компонент:

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
        <h1>Welcome to {{title}}!</h1>
        <button (click)="increment()">Increment</button>
        <button (click)="decrement()">decrement</button>
        <child-component [count]=Counter></child-component>` ,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Component Interaction';
  Counter = 5;

  increment() {
    this.Counter++;
  }
  decrement() {
    this.Counter--;
  }
}

Ссылка