在角度中单击"关闭"按钮时隐藏父组件

Question

如上所述，当在子组件中单击按钮时，我想隐藏父组件。所有大写字母的注释显示了我尝试在哪里实现此功能。如有任何帮助，我们将不胜感激。

子组件.ts

export class CardComponent implements OnInit {
//Event variable to display this cards details
@Input()
singleevent!:myevent;

//SENDING BOOLEAN EVENT TO PARENT COMPONENT
@Output()
onRemoveClick!:EventEmitter<boolean>;
constructor() { }
ngOnInit(): void {
//Initialize event to get from service layer
}
//FUNCTION FOR EVENT EMITTER TO EMIT BOOLEAN VALUE
removeClick(){
this.onRemoveClick.emit(true);   
}

}

子组件.html

<div class="card text-center" style="width: 18rem;">
<div class="card-header card-title">

<!-- HERE IS THE BUTTON WITH THE REMOVE CLICK FUNCTION ATTATCHED -->
<button type="button" class="btn-close" aria-label="Close" (click)="removeClick()"></button>
<h3>{{singleevent.name}}</h3></div>
<div class="card-body">
<h5 class="card-text">Date: {{singleevent.date | date : 'shortDate' }}</h5>
<h5 class="card-time"> Start time: {{singleevent.startTime}}</h5>
<h5 *ngIf="singleevent.endTime !== null">{{singleevent.endTime}}</h5>
</div>

parent.ts

export class CardlistComponent implements OnInit {

//events variable will be set to event service get request
events:myevent[] = EVENTS;
eventlist!:myevent[]
constructor() { }
ngOnInit(): void {
}
//FUNCITON I MAY NEED TO CALL IN PARENT HTML
remove(value:boolean){
if(value)
return true;
return false;
}
}

parent.html这是我感到困惑的地方，我如何调用[hidden]属性或使用我的输出来隐藏我正在渲染的子组件。

<app-button (click) = "toggleEvent()" text="Add New Event" color="dodgerBlue"></app-button>
<div class="container" [hidden]="!toggleNewEvent">
<app-newcard></app-newcard>
</div>
<div class = "container">
<div class = "row" >       
<div class = "col-sm" *ngFor="let thisevent of events">

//THIS IS THE EVENT I WANT TO HIDE WHEN THE BUTTON IN THIS CHILD IS CLICKED
<app-card [singleevent]="thisevent"></app-card>
</div>
</div> 
</div>

Answer 1

您没有在父html中捕获输出。因此，首先捕获onRemoveClick，然后当发射器被触发时，它将使用发射的值调用remove。

<app-card [singleevent]="thisevent" (onRemoveClick)="remove($event)"></app-card>

现在会触发remove，但该值不会传递到父组件中的任何位置。您不需要随机返回布尔值，而是需要将该值分配给将在html中使用以隐藏的变量。假设你有一个新的变量hideParent

hideParent: boolean = false;
remove(value:boolean){
this.hideParent = value;
}

现在您知道prent是否必须隐藏在一个可以从html轻松访问的变量中。下一步是使用该变量。

我不知道你到底想隐瞒什么，但你只需要绑定[hidden]="hideParent"