从子节点更新父节点的@Input属性

Question

我想要从子级更新@Input属性，并使更改对父级生效。

家长TS（文件详情）：

export class DocumentDetailsComponent implements OnInit {
  view: string = 'editor';
}

父HTML（文档详情）：

<document-content [(view)]="view" ></document-content>

儿童TS（文件内容）：

export class DocumentContentComponent implements OnInit, OnChanges {

  @Input() view: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.version) {
      this.view = 'editor';
    } 
  }
}

当子组件内的视图属性设置为“编辑器”时，它似乎不会反映父组件内的这些更改。

我知道我可以使用@Ouput事件发射器，但我觉得这应该可以正常工作。

Answer 1

当角度引导时，它会构建一个组件树。

组件具有输入和输出属性，可以在组件装饰器中定义或使用属性装饰器。

数据通过@input属性（Parent to child）流入组件。数据通过@output（子级到父级）属性从组件流出。

带有@input属性数据的

向下流向树。它不会向上流动。

如果您希望数据流向相反方向，即向上，您需要使用@Output装饰器和事件发射器。

Answer 2

如果您希望更改@Input以影响父级，这意味着您希望@Input也成为@Output，则可以将其称为two-way binding找到文档here。

但总的来说，这是成角度的：

<document-content [(view)]="view" ></document-content>

是语法糖吗？

<document-content [view]="view" (viewChange)="view=$event" ></document-content>

因此，为了使您的代码正常工作，您需要创建viewChange输出，并在代码更改view属性时调用emit（）。

@Input() view: string;
@Output() viewChange = new EventEmitter<string>();

ngOnChanges(changes: SimpleChanges) {
  if (changes.version) {
    this.view = 'editor';
    this.viewChange.emit(this.view);
  } 
}