为什么从内部组件中更改 @Input 变量会导致它无法检测到来自外部组件的新更改？

Question

我正在尝试在下面的 'EditDialogComponent' 中设置 CSS class（这是模态视图），具体取决于名为 [=42] 的输入属性 =] 从 'AppComponent':

设置

HTML代码：

    <div [ngClass]="showMe? 'ui active modal': 'ui modal'">
      <i class="close icon"></i>
      <div class="header">
        Edit
      </div>
      <div class="actions">
        <div (click)="cancel()" class="ui black deny button">
          Cancel
        </div>
        <div class="ui positive right labeled icon button">
          OK
          <i class="checkmark icon"></i>
        </div>
      </div>
    </div>

2。打字稿代码：

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

@Component({
  selector: 'edit-dialog',
  templateUrl: './edit-dialog.component.html',
  styleUrls: ['./edit-dialog.component.css']
})
export class EditDialogComponent implements OnInit {

  _showMe: boolean

  @Input() subject: string

  @Input() set showMe(value: boolean) {
    this._showMe = value
    window.alert('Trying to show modal')
  }

  get showMe() : boolean {
    return this._showMe
  }

  cancel() {
    this._showMe = false
  }

  constructor() { }

  ngOnInit() {
  }

}

下面是用于将 'EditDialogComponent' 包含到 'AppComponent' 中的代码：

HTML代码：

        <button (click)='edit()'>Edit</button>

    <edit-dialog [showMe]="show_edit_modal" subject='foobar'></edit-dialog>

TypeScript 代码：

    edit() {
        window.alert('Trying to show modal')
        this.show_edit_modal = true }

问题是在 showMe @Input() 从 EditDialogComponent 中更改后（通过单击模式的 'Cancel' 按钮调用），它无法检测到AppComponent.edit() 调用的数据绑定（即 show_edit_modal）的更改（每当我单击 AppComponent 的编辑按钮时显示 "Trying to show modal"），因为来自 [=17 的警报=] 停止显示。

为什么从内部组件中更改 @Input 变量会导致其无法检测到来自外部组件的新更改？

Answer 1

这是按预期工作的。 @Input() 不会导致检测到更改。

showMe="{{show_edit_modal}}"

是 Angulars 变更检测检查的内容。

更好

[showMe]="show_edit_modal"

实际传递布尔值而不是字符串

你能做的就是让showMe成为setter

_showMe:boolean;
@Input() set showMe(val: boolean) {
  this._showMe = val;
  window.alert('Trying to show modal')
}

get showMe() : boolean {
  return this._showMe;
}

Answer 2

@Input 只是一种单向绑定。如果您还想更改父组件中的值，则必须创建两种方式的数据绑定。为此，您必须创建一个与输入同名的输出（在您的情况下为 showMe）+ 更改（例如：showMeChange: EventEmitter<any>），并在您的 showMe setter 中发出.

在您的父组件中，您现在可以像 ngModel 一样使用它。

<edit-dialog [(showMe)]="show_edit_modal" subject='foobar'></edit-dialog>

我在这里创建了一个完整的例子：https://stackblitz.com/edit/angular-c83djz

为什么从内部组件中更改 @Input 变量会导致它无法检测到来自外部组件的新更改？

Why changing the @Input variable from within the internal component causes its failure to detect new changes from external component?

data-binding

components

interaction

typescript

angular