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 click（）将起作用并将一些字符串传递给服务

服务将更改点击的变量

比父母高。组件从服务获取新变量

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

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

该如何解决？

Answer 1

参考Angular docs for component interacion

child component公开了EventEmitter的{{1}}属性，当发生某些情况时。

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

孩子的emits events属性是一个输出属性，通常用EventEmitter装饰，如此@Output

所示

以下是代码：

parent.component

ParentComponent

parent.html

constructor(private qqs: qqService) {}

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

child.component

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

child.html

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

Answer 2

您的代码存在以下问题：

服务：每当clickEvent更改clicked的引用时。
parent.component：您已经在qqs.clicked中保存了对clicked的引用（假设代码中的clicked指向了this.clicked），但是下次每次{{1} }将被调用，clickEvent的引用将被更改，并且父级qqs.clicked内部将具有旧引用。

解决方案通过在 parent.component 中将其公开，并在 parent.html 中将clicked替换为{ {1}}。

这将解决您的问题，但我还指出了几件事：

在您的parent.html qqs中，开始标记与结束标记不匹配。
当您已经在给孩子注射Service时。需要使用物业出价来传递[clicked]="clicked"的值。

Angular服务变量更改并更新了另一个组件

2 个答案: