为什么这在 Angular 中不起作用？答案

【问题标题】：Why this doesn't work in Angular?为什么这在 Angular 中不起作用？
【发布时间】：2018-08-12 01:27:43
【问题描述】：

我有一个父组件和一个子组件。我正在将一个方法从父组件传递给子组件。该子组件调用父组件传递的方法并将“this”（子组件的实例）发送给父组件。现在，如果我使用上面传递的实例更改子组件中的任何属性，它不会检测到任何更改。

例如，

@Component({...})
export class Parent {
  toChild(obj) {
      obj.mssg = "changes"; //this should trigger change detection in child component 
  }
}

Template:
<div>
<child [toChange]="toChange"></child>
</div>

@Component({...})
export class Child {
    mssg:string = "";

    @Input() toChild:Function;

    handleOnClick(evt) {
       this.toChild(this);
    }
}

Template:
<div (click)="handleOnClick($event)">{{mssg}}</div>

【问题讨论】：

更好地格式化您的代码并阐明您的要求。这是不可读的
将值传递给子组件而不是函数更好，因为您将值从父值传递给子组件将反映在子组件中
如果你想调用父方法使用EventEmitter...
更新代码，请立即查看。
在孩子中，输入被称为toChild，但您使用toChange传递它

标签： angular angular5 angular6

【解决方案1】：

你的语法不太正确，正如其他人提到的那样......你有一些不正确的名字。

我能够在没有输出属性的情况下使用您的技术但更正了语法，让更改检测正常工作。

父组件代码

  toChild = obj =>
      obj.mssg = "changes"; //this should trigger change detection in child component

这定义了一个作为函数的属性。

父模板

<hello [toChange]="toChild"></hello>

这里我将它绑定到持有函数的属性。

子组件

  mssg: string = "click here";

  @Input() toChange: Function;

  handleOnClick(evt) {
    this.toChange(this);
  }

您可以在此处找到有效的 stackblitz：https://stackblitz.com/edit/angular-osqytg?file=src%2Fapp%2Fhello.component.ts

【讨论】：

你好黛博拉！感谢您对此的回复。我看过你的PS课程。我很高兴你回答了这个问题。

【解决方案2】：

实现这一点的最佳方法是使用输入和输出事件

@Component({...})
class Parent{
  mssg: string = '';
  updateChild(){
    this.mssg = "changes"; //this will trigger change detection in child component 
  }
}

<child [mssg]="mssg" (onClick)="updateChild()"></child> 

@Component({...})
class Child{
  @Input()
  mssg:string = "";

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

  handleOnClick(){
    this.onClick.next()
  }
}

试图将一个函数从父级传递给子级，通过将子级作为参数传递给函数来修改子级，这是行不通的，因为组件范围未正确绑定，这通常是一个坏主意，因为太复杂了。

【讨论】：