Я хочу заменить текст в компоненте "х", нажав кнопку из компонента "у"

Question

У меня есть два компонента, которые я хочу подключить. В компоненте "x" я получил некоторый текст в файле шаблона, а в компоненте "y" я получил кнопку, которую я хочу нажать, чтобы заменить / изменить текст в компоненте "x".

это "x" "текст, который я хочу изменить:

<p> Text i want to replace </p>

это текст" y "component.ts, который я хочу заменить на:

  changeTheText: string = "Text i want to change to";
  showMyContainer2: boolean = false;

  clearMe(){
    this.showMyContainer2 = true;
    this.UIS.clearStorage();
  }

это" y " "component.template:

<button id="clearBtn" (click)="clearMe()">Change the text button</button>
<div *ngIf="showMyContainer2">
{{changeTheText}}
</div>

Answer 1

Является ли x прямым потомком y? Значение означает HTML как это?

<y>
  <x></x>
</y>

Если это так, вы можете использовать @Input() properties

In x component.ts, сделайте следующее:

// import Output and EventEmitter from '@angular/core`;
@Input text: string;

И я предполагаю, что HTML:

<p>{{ text }}</p>

Затем в y.component.ts выполните:

clearMe(){
    this.showMyContainer2 = true;
    this.UIS.clearStorage();
    this.changeTheText = 'New Text you want'
  }

И в y. html, сделайте :

<div class="y">
  <x [text]="changeTheText"></x>
</div>

Вы можете использовать EventEmitters, как упоминал Мамосек, но это зависит от иерархии x and y. Являются ли они parent => child или child => parent.

Если у них нет родительско-дочерних отношений, вам нужно создать среднего человека Service с BehaviorSubject и обоими x и y нужно ввести это Service и передать через него BehaviorSubject, выполнив .next для pu sh нового значения и .subscribe для прослушивания значений.

===== ================= Редактировать ================================

Имеет ли смысл размещать текст в компоненте Z?

Компонент Z.ts

textToChange = 'Change this text';

changeTheText() {
  this.textToChange = 'new text';
}

Компонент Z. html

<div class="z">
  // feed the text down to the x component
  <x [text]="textToChange"></x>
  // listen to the textChanged event from component Y and every time it happens call the function changeTheText
  <y (textChanged)="changeTheText()"></y>
</div>

Компонент X.ts

// take input of text from parent's location
@Input() text: string;

Компонент X. html

<div>{{ text }}</div>

Компонент Y.ts

@Output textChanged: EventEmitter<void> = new EventEmitter();

changeTheText() {
  // emit the event so the text can change in component Z
  this.textChanged.emit();
}

Компонент Y. html

<button (click)="changeTheText()">Change the text</button>

Я все это сделал бесплатно, так что могут быть некоторые ошибки, но вы поймете, что такое.

Если текст не может находиться в компоненте Z, вам потребуется централизованный подход, такой как Я упоминал перед этим редактированием.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable({
  providedIn: 'root',
})
export class TextChangeService {
  text = new BehaviorSubject('initial value of text');
  constructor() { }

}

component X.ts (HTML для обоих компонентов остаются неизменными)

text: string;
constructor(textService: TextService){ }

ngOnInit() {
  this.text.subscribe(text => this.text = text);
} 

* 1 067 * component Y.ts

constructor(textService: TextService){ }

changeTheText() {
  this.textService.next('New text');
}

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

Answer 2

Вы можете сделать это, используя EventEmitters

https://angular.io/api/core/EventEmitter