Angular 10模态数据绑定引导程序

问题描述

我有一个理解上的问题，也许有人可以帮助我。 Angular总是说@input()可以进入嵌套组件的深度，然后返回@Output()事件。我觉得这是一个很好的概念。那么，为什么在我的案例中存在双向约束？

感谢您的帮助！

app.component.ts：

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: \['./app.component.scss'\]
})

export class AppComponent {

  public group: Group = {
    id: 1,name: 'Gruppe A',members: [
      {
        id: 1,firstName: 'Firstname A',lastName: 'Lastname A'
      },{
        id: 2,firstName: 'Firstname B',lastName: 'Lastname B'
      }
    ]
  };

  constructor(private ngbModal: NgbModal) {}

  public openModal(): void {
    const testModal = this.ngbModal.open(TestModalComponent);
    testModal.componentInstance.group = this.group;
    testModal.result.then((group) => {
      this.group = group;
    }).catch(() => {});
  }

}

`test-modal.component.ts`:

```typescript
@Component({
  selector: 'app-test-modal',templateUrl: './test-modal.component.html',styleUrls: ['./test-modal.component.scss']
})

export class TestModalComponent implements OnInit {

  @input() group: Group;

  constructor(public ngbActiveModal: NgbActiveModal) {}

  public save() {
    this.ngbActiveModal.close(this.group);
  }

  public ngOnInit(): void {}

  ublic updateMember(member: Member): void {}
}

entry.component.ts：

@input() member: Member;

@Output() updateMember: EventEmitter<Member> = new EventEmitter<Member>();

public memberForm = new FormGroup({
  firstName: new FormControl(null),lastName: new FormControl(null)
});

constructor() {}

public ngOnInit(): void {
  this.memberForm.patchValue({
    lastName: this.member.lastName,firstName: this.member.firstName
  });
}

public saveMember(): void {
  this.member.lastName = this.memberForm.getRawValue().lastName;
  this.member.firstName = this.memberForm.getRawValue().firstName;
}

entry.component.html

<form [formGroup]="memberForm">
  <div class="row mb-2">
    <div class="col-lg-5">
      <input
        class="form-control"
        formControlName="firstName"
        (ngModelChange)="saveMember()"
      />
    </div>
    <div class="col-lg-5">
      <input
        class="form-control"
        formControlName="lastName"
        (ngModelChange)="saveMember()"
      />
    </div>
    <div class="col-lg-2">
      <button class="btn btn-success">
        <i class="fas fa-save"></i>
      </button>
    </div>
  </div>
</form>

解决方法

如果您的意思是entry.component.ts成员和成员更新，您可以这样做

@Input() member: Member;

@Output() memberChange: EventEmitter<Member> = new EventEmitter<Member>();

用法示例

<app-entry [(member)]="member"></app-entry>

在这种情况下，您只能使用[(member)]="member"。

请注意：：要使用香蕉盒（[()]），您需要输入@Input() property和输出@Output() propertyChange = new EventEmitter<Member>();方法。