Javascript 角度服务变量更改并更新了另一个组件

服务台

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

父组件

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

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

parent.html

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

child.html

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

如果用户单击child.html

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

child.component click（）将起作用，并将一些字符串传递给服务

和服务将更改

而不是父母。组件从服务获取新变量

并通过@Input（）传递给所有子级

现在我的问题是父母。组件无法从服务获取新变量

如何解决此问题？

参考

子组件

公开了一个

EventEmitter

属性，当发生某些事情时，它将使用该属性发出事件

父级绑定到该事件属性并对这些事件作出反应。

子级的

EventEmitter

属性是一个输出属性，通常用

@output

装饰来装饰，如本

ParentComponent

代码如下：

父组件

constructor(private qqs: qqService) {}

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

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

parent.html

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

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

子组件

constructor(private qqs: qqService) {}

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

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

从'@angular/core'导入{Component，EventEmitter，Input，Output}；
构造函数（私有qq:qqService）{}
@点击输入（）；
@Output（）onclicked=neweventemitter（）；
单击（项目）{
这个。点击。发射（同意）；
}

child.html

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

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

参考

子组件

公开了一个

EventEmitter

属性，当发生某些事情时，它将使用该属性发出事件

父级绑定到该事件属性并对这些事件作出反应。

子级的

EventEmitter

属性是一个输出属性，通常用

@output

装饰来装饰，如本

ParentComponent

代码如下：

父组件

constructor(private qqs: qqService) {}

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

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

parent.html

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

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

子组件

constructor(private qqs: qqService) {}

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

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

从'@angular/core'导入{Component，EventEmitter，Input，Output}；
构造函数（私有qq:qqService）{}
@点击输入（）；
@Output（）onclicked=neweventemitter（）；
单击（项目）{
这个。点击。发射（同意）；
}

child.html

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

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

---

您的代码存在以下问题：

• 服务：只要

  单击事件

  ，它就会更改

  单击的参考

• parent.component：您已经保存了

  qqq.clicked

  中的

  的引用（假设代码中的
  clicked
  指的是
  这个。clicked
  ），但是下次调用
  clickEvent
  ，单击的
  qqs.的引用将被更改，并且在父级
  中单击的
  将具有旧引用

解决方案是通过在parent.component和parent.html中将整个

qqq

公开，将其替换为

[clicked]=“clicked”

到

[clicked]=“qqs.clicked”

这将解决您的问题，但我注意到以下几点：

• 在parent.html中，起始标记与结束标记不匹配
• 当你已经在孩子身上注射服务时。使用属性竞价传递单击的

  值所需的内容
  

您的代码存在以下问题：

• 服务：只要

  单击事件

  ，它就会更改

  单击的参考

• parent.component：您已经保存了

  qqq.clicked

  中的

  的引用（假设代码中的
  clicked
  指的是
  这个。clicked
  ），但是下次调用
  clickEvent
  ，单击的
  qqs.的引用将被更改，并且在父级
  中单击的
  将具有旧引用

解决方案是通过在parent.component和parent.html中将整个

qqq

公开，将其替换为

[clicked]=“clicked”

到

[clicked]=“qqs.clicked”

这将解决您的问题，但我注意到以下几点：

• 在parent.html中，起始标记与结束标记不匹配
• 当你已经在孩子身上注射服务时。使用属性竞价传递单击的

  值所需的内容
  

使用rxjs行为主题或主题在组件之间共享数据。在子级中，添加一个EventEmitter:

@Output（）clickChanged=new EventEmitter（）当响应返回时，向输出发出一个事件
this.clickChanged.next（item）
或
this.clickChanged.emit（item）
。在父级中：
使用rxjs行为主题或主题在组件之间共享数据。在子级中，添加一个EventEmitter:
@Output（）clickChanged=new EventEmitter（）当响应返回时，向输出发出一个事件
this.clickChanged.next（item）
或
this.clickChanged.emit（item）
。在父项中：
我尝试。但是[clicked]=“qqs.clicked”无法将新变量传递给child.component。单击无法获取变量我无法理解错误，能否提供更多信息。我尝试了。但是[clicked]=“qqs.clicked”无法将新变量传递给child.component。qqs.clicked无法获取变量我无法理解错误，您能否提供更多信息。no notes@user10892059，如果您觉得我的答案有用，您可以接受我的答案。no notes@user10892059，如果您觉得有用，您可以接受我的答案。