Изменение угловой сервисной переменной и обновление другого компонента

Question

service.ts

clicked: string = '';
clickEvent(item){
      this.clicked = ( this.clicked.length > 0 && this.clicked == item ) ? '' : item;
  }

parent.component

 constructor(private qqs: qqService) {}
  clicked = this.qqs.clicked;

parent.html

<app-child [clicked]="clicked"></app-ou>

child.component

constructor(private qqs: qqService) {}
    @Input() clicked;
     click(item){
       this.qqs.clickEvent(item);
       }

child.html

<div class="a" (click)="click('some string')"></div>

Если пользователь щелкнет по child.html

child.component, клик () сработает и передаст некоторую строку в службу

и служба изменитсяПеременная нажата

, чем родитель.компонент получает новую переменную из службы

и передает ее всем дочерним элементам с помощью @Input ()

Теперь моя проблема - родитель.компонент не может получить новую переменную из службы

Как это исправить?

Answer 1

Проблемы с вашим кодом следующие:

• Сервис: всякий раз, когда clickEvent меняет ссылку на clicked.
• parent.component: вы сохранили ссылку qqs.clicked в clicked (при условии, что clicked в вашем коде относится к this.clicked), но всякий раз, когда в следующий раз будет вызываться clickEvent, ссылка qqs.clicked будет изменен и внутри родительского элемента clicked будет иметь старую ссылку.

Решение либо представляет шаблон qqs целиком, публикуя его в parent.component и в parent.html , заменяя [clicked]="clicked" на [clicked]="qqs.clicked".

Это исправит вашу проблему, но я заметил еще несколько вещей:

• В вашем parent.html <app-child [clicked]="clicked"></app-ou> начальный тег не соответствует конечному тегу.
• когда вы уже вводите Сервис ребенку. что необходимо для передачи значения clicked, используя свойство biding.

Answer 2

Применительно к Угловые документы для взаимодействия компонентов

child component предоставляет свойство EventEmitter, с которым оно emits events, когда что-то происходит.

Родитель связывается с этим свойством события и реагирует на эти события.

Дочернее свойство EventEmitter является выходным свойством, обычно украшенным украшением @Output, как показано в этом ParentComponent

Вот коды:

parent.component

constructor(private qqs: qqService) {}

onClicked(item) {
    console.log(item)
  }

parent.html

<app-child [clicked]="clicked"  (onclicked)="onClicked($event)"></app-ou>

child.component

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

constructor(private qqs: qqService) {}
    @Input() clicked;

    @Output() onclicked = new EventEmitter<any>();

     click(item){
       this.clicked.emit(agreed);
    }

child.html

<div class="a" (click)="click('some string')"></div>