以角度单击关闭按钮时隐藏父组件答案

【问题标题】：Hide parent component when close button is clicked in angular以角度单击关闭按钮时隐藏父组件
【发布时间】：2022-02-13 04:35:28
【问题描述】：

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

子组件.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>

父.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>

【问题讨论】：

标签： html angular typescript

【解决方案1】：

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

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

现在触发了删除，但该值未在父组件中的任何地方传递。您需要将该值分配给将在 html 中用于隐藏的变量，而不是随机返回布尔值。所以假设你有一个新变量hideParent

hideParent: boolean = false;

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

现在您知道是否需要将 prent 隐藏在一个易于从 html 访问的变量中。下一步是使用该变量。

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

【讨论】：

这不起作用。
你把隐藏输入放在哪里了