从不更新父项的子项更新@Input属性

Question

I am wanting to update an @Input property from a child and for the changes to take effect on the parent.

Parent TS (document-details):

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

Parent HTML (document-details):

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

Child TS (document-content):

export class DocumentContentComponent implements OnInit, OnChanges {

  @Input() view: string;

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

When the view property inside the child component gets set top 'editor' it doesn't seem to reflect these changes inside the parent component.

I know I could use an @Ouput event emitter but I feel like this should work fine.

Answer 1

When angular bootstraps it builds a component tree.

A component has input and output properties, which can be defined in the component decorator or using property decorators.

Data flows into a component via @input properties(Parent to child ). Data flows out of a component via @output (child to parent) properties.

with @input property data flows down the tree.It doesn't flow upwards.

if you want data flow in the opposite direction ie Upwards you need to use @Output decorator and Event emitter.

Answer 2

If you want changes from an @Input to affect the parent that means you want your @Input to also be an @Output , this is called two-way binding to which you can find the documentation here .

But in summary what happens is that in angular this:

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

Is syntactic sugar for this:

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

So in order for your code to work you need to create the viewChange output and call emit() whenever your code changes the view property.

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

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