Question

我有嵌套在以下层次结构中的组件。以下是代码的相关摘要：

+ HomeComponent:
  - home.component.ts
         initialText = ''; 

         changeSearchText() {
           this.initialText = 'text has been changed!';
         } 
  - home.component.html
         <app-search [searchText]="initialText"/>

  + SearchComponent [selector: app-search]
    - search.component.ts
      @Input() private searchText: string;

    - search.component.html 
      <app-search-input [searchText]="searchText"/>

    + SearchInputComponent [selector: app-search-input]
      - search-input.component.ts:
      @Input() private searchText: string;

      - search-input.component.html:
        <input type="text" [value]="searchText">

因此，在我的HomeComponent中，我有一个带有事件绑定（单击）的按钮来更改SearchText（）。当我单击HomeComponent中的按钮时，会触发changeSearchText（）。这会更改initialText值，由于属性绑定，更改会向下迁移，直到调用嵌套的SearchInputComponent中的[value]绑定并更新字段。

但是，这仅在我第一次点击它时起作用。后续单击会触发changeSearchText（）并更改HomeComponent.initialText的值，但更改不会向下迁移，并且输入控件中的值不会更改。

为什么它第一次运行而不是后续运行？我在这里缺少什么？

我尝试使用ngOnChanges进行跟踪，并确保第一次调用子组件上的ngOnChanges，但不是随后调用。

编辑 - 我发现即使你有一个带有[value]属性的文本输入字段的简单组件，这也不起作用，只能在第一次工作。

谢谢@Richards，就是这样！ :)'文字已被更改！'是相同的值，因此它没有检测到任何变化。我把它改成了这个，每次都没有问题地改变，很高兴知道：

  changeSearchText() {
    const dateFmt =  new Date().toLocaleString();
    this.initialText = 'I changed the text! ' + dateFmt;
}

需要了解此绑定有什么问题

0 个答案: