Angular2中点击隐藏Div功能异常问题求助

看起来你遇到的核心问题是组件状态没有随着新画作的加载自动重置，我来帮你梳理下原因和解决方案：

你的PaintingDetailsComponent里，isHidden只在constructor中初始化了一次为true。但当你搜索新画作时，Angular通常会复用这个组件实例，只是更新painting输入属性——这时候isHidden还保留着上一次操作后的状态，导致新画作加载后点击预览div的逻辑和预期不符。

最稳妥的解决办法是在画作更新时强制重置组件状态，我们可以用Angular的OnChanges生命周期钩子来实现：

步骤1：修改组件代码，添加状态重置逻辑 #

更新你的painting-details.component.ts：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import {Painting} from './painting';

@Component({
 selector: 'painting-details',
 templateUrl: 'partials/paintingdetails.html',
 styleUrls: ['css/search-details.css']
})
export class PaintingDetailsComponent implements OnChanges{
 @Input() painting: Painting; // 用@Input()替代inputs数组，更规范
 isHidden: boolean;
 
 constructor(){
  this.isHidden = true;
 }

 // 当输入属性变化时自动触发
 ngOnChanges(changes: SimpleChanges): void {
  // 检测到painting属性更新时，重置状态
  if (changes['painting']) {
    this.isHidden = true;
  }
 }
 
 onClick(): void{
  console.log('button clicked yo');
  this.isHidden = !this.isHidden;
 }
}

步骤2：确认模板事件绑定正确性 #

确保你的预览div和大div的点击事件都正确绑定到onClick方法，比如子组件模板示例：

<!-- 预览div，点击触发显示大div -->
<div (click)="onClick()" class="preview">
  <!-- 预览内容，比如缩略图 -->
</div>

<!-- 画作详情大div，根据isHidden控制显示/隐藏 -->
<div *ngIf="!isHidden" (click)="onClick()" class="painting-details">
  <h3>{{painting.title}}</h3>
  <p>{{painting.description}}</p>
  <!-- 其他画作信息 -->
</div>

为什么这样能解决问题？ #

• ngOnChanges会在组件的输入属性（比如painting）发生变化时自动触发，不管是第一次赋值还是后续更新。
• 每次新画作加载时，我们强制把isHidden重置为true，确保大div默认处于隐藏状态，点击预览div就能正确切换到显示状态，完美适配搜索后的新内容。

这样修改后，你再搜索新画作，点击预览div就能正常显示对应的详情大div，点击大div也能隐藏，循环操作都不会再出现失效问题啦！

内容的提问来源于stack exchange，提问作者user9541762