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

Question

我有一个理解问题，也许有人可以帮助我。 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>

Answer 1

如果你的意思是 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>();方法。