Question

我正在尝试在下面的'EditDialogComponent'中设置CSS类（这是一个模态视图），具体取决于从'AppComponent'设置的名为'showMe'的输入属性：

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。 TypeScript代码：

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 code：

        <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内部改变后（通过点击模态的'取消'按钮调用），它无法检测到的变化由AppComponent.edit()调用的数据绑定（即show_edit_modal）（每当我点击AppComponent的编辑按钮时显示“试图显示模态”），因为来自EditDialogComponent.ngOnChanges()的警报停止显示。

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

Answer 1

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

showMe="{{show_edit_modal}}"

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

更好

[showMe]="show_edit_modal"

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

你可以做的是让showMe成为一个二传手

_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变量会导致无法检测到外部组件的新更改？

2 个答案: