Angular服務變量更改並更新了另一個組件

Question

服務

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

父組件

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

parent.html

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

子組件

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 click（）將起作用並將一些字符串傳遞給服務

服務將更改點擊的變量

比父母 組件從服務獲取新變量

並通過@Input（）傳遞給所有孩子

現在我的問題是父母。 組件無法從服務獲取新變量

如何解決？

Answer 1

關於組件交互的角度文檔參考

child component公開一個EventEmitter屬性，當發生某些emits events時，該屬性將emits events 。

父級綁定到該事件屬性並對這些事件做出反應。

子項的EventEmitter屬性是一個輸出屬性，通常在此ParentComponent看到@Output裝飾

以下是代碼：

父組件

constructor(private qqs: qqService) {}

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

parent.html

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

子組件

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>

Answer 2

您的代碼存在以下問題：

• 服務：每當clickEvent它都會更改clicked引用。
• parent.component：您在clicked保存了qqs.clicked引用（假設代碼中的clicked引用了this.clicked ），但是每當下次調用clickEvent時， clickEvent的引用將被更改，並且內部qqs.clicked也將被clicked有舊的參考。

解決方法是，暴露整個qqs通過使它在parent.component公眾和parent.html替換到模板[clicked]="clicked"到[clicked]="qqs.clicked" 。

這將解決您的問題，但我指出了幾件事：

• 在您的parent.html <app-child [clicked]="clicked"></app-ou>開始標記與結束標記不匹配。
• 當您已經在兒童中注射服務時。 使用物業出價來傳遞clicked價值需要什么