Question

我有一些数据，我从我的孩子传递到父组件，我希望它检查它是否为空或者它内部有一些值。

这是我的login.compunent.ts - 孩子ts

@Output() update=new EventEmitter<string>();
userEmail = "a@b.com";
authUser(loginForm) {      
      this.update.emit(userEmail);
      this.router.navigate(['/home']);
  }

这是我的app.compunent.ts - 父ts

  emailData:string;

  onUpdate(userEmail:string){
    console.log("userEmail")
    if(userEmail !== ''){
      this.emailData = userEmail
      console.log(userEmail)
    }
  }

这是在我的app.compunent.html - parernt html

中

{{emailData}}
<router-outlet (update)="onUpdate($event)"></router-outlet>

Answer 1

我不确定我是否完全理解你，但是如果你想“自动”将孩子的数据传递给你的父母，我相信你必须实现一个双向可绑定属性。

你这样做

child.ts

export class SomeComponent  {
  ...
     @Input() something;
     // it's important to name it with the 'Change' suffix 
     @Output() somethingChange = new EventEmitter();
  ...

parent.html

<some-component [(something)] = "someFieldYouWantToTwoWayBindTo"></some-component>

现在每当您从孩子那里更新something时，字段someFieldYouWantToTwoWayBindTo也会更新

现在，如果您想检查something中的内容并仅过滤某些情况，请为someFieldYouWantToTwoWayBindTo

实施设置器

parent.ts

_someFieldYouWantToTwoWayBindTo
set someFieldYouWantToTwoWayBindTo(value) {
    if(value !== '')
      this._someFieldYouWantToTwoWayBindTo = value;

}

使用@output将数据从子组件发送到父组件

1 个答案: