Question

所以我有两个组件HomeComponent和UserComponent。 UserComponent是HomeComponent的子代，如下所示：

UserComponent.html：

<form [formGroup]="form">
  <div style="display:block">
    <label style="display:block">Search:
      <input #filterString formControlName="filterString" type="text"  id="testInput" class="ui-corner-all">
    </label>
  </div>
  <p-dataTable>
  //Primeng datatable...
  </p-dataTable>

UserComponent.ts：

    @Component({
     selector: 'user',
     templateUrl: './user.component.html',
     styleUrls: ['./user.component.css']
     })

  export class ProjektAuswahlComponent implements OnInit { 
     form = new FormGroup({
        filterString: new FormControl('', Validators.required)
     })

     constructor(/*possible services*/) {
     }

     ngOnInit() {
     //do something...
     }
     get filterString() { return this.form.get('filterString') };

     clearInput(){
     this.filterString.setValue('');
    }  
    }

这就是HomeComponent的样子 - ＆gt;

HomeComponent.html：

<!--
some other stuff like buttons and paragraphs...
<button id="userBtn" class="someCssStyles">OpenUser</button>
--> 
<p-dialog id="homeDialog" styleClass="random" closeOnEscape="true" [contentStyle]="{'overflow':'auto'}"
    [(visible)]="display" modal="modal" width="650" height="auto" [responsive]="true" [resizable]="true" (onShow)="showDialog()" (onHide)="hideDialog()" >
    <p-header>
        <div style="text-align: center;">My First Header</div>
    </p-header>
    <user></user>
</p-dialog>

HomeComponent.ts：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],

})
export class HomeComponent implements OnInit {

//Show / hide Dialog
public display: boolean = false;

constructor(/*possible webservices service*/){}

ngOnInit(){
/*load data from service class*/
}

showDialog(){
this.display = true;
}
hideDialog(){
this.display = false;
}

当您打开网站时，您将首先看到Homecomponent，其中显示了一些按钮和一个隐藏的Primeng对话框。当您单击按钮时，dialog将打开，这将在该对话框中呈现User template。
现在在Usertemplate中我有一个输入字段，我可以使用它来过滤数据表，目标是在对话框关闭时清除输入字段值。该对话框有一个名为onHide的回调事件，该事件应该以某种方式完成。

但问题是我不知道如何告诉UserComponent HomeComponent内的对话框已关闭。

现在的问题是如何清除UserComponents输入值对话框关闭时来自Homecomponent？

我尝试在Homecomponent中创建一个UserComponent实例并调用一个函数来清除该值，但是它没有用，它确实执行了该方法但视图没有更新。它看起来像这样：

HomeComponent.ts：

//imports
//@Component
//etc.
constructor(private userComponent: UserComponent){
userComponent = new UserComponent();
}

hideDialog(){
this.userComponent.clearInput();
}

Answer 1

您需要在对话框组件上注册一个事件：

@Output()
private hideEvent: EventEmitter<boolean> = new EventEmitter();

onHide() {
    hideEvent.emit(true);
}

然后，您可以通过父组件监听此事件：

<p-dialog (hideEvent)="someFunction()" >
</p-dialog>

Answer 2

1）使用对话框中的onHide回调来设置HomeComponent中的标志。将标志传递给UserComponent，检查它是否为真（对话框已关闭），然后进行操作并使用事件发射器通知HomeComponent将标志更改为false。

要检查UserComponent中的标志，您可以使用生命周期ngOnChanges（）。

2）您也可以在HomeComponent

中使用ViewChild

 @ViewChild(UserComponent)
  private userComponent: UserComponent;

然后

onHide() {
// Clear imputs
this.userComponent.name = '';
}

更改另一个组件

2 个答案: