Javascript 在角度2中单击隐藏div 2

我是Angular2的新手。我有一个应用程序，它有一个搜索字段，允许用户搜索我的一幅画。当找到匹配项时，将显示预览div，单击该div后，将显示一个更大的div，其中包含有关绘画的信息。当用户查看完该div并希望搜索另一个div时，我希望他们能够通过单击该div使其消失。现在，我已经找到了如何让div在用户单击它时消失的方法。但是如果用户搜索一幅新画，当他们点击预览div时，较大的div不会显示。我认为这可能与当时应用程序的状态有关，但我不是100%确定，因为我是Angular2的新手，这就是我向您寻求帮助的原因。您可以在此链接测试我上面描述的行为：

谢谢，希望你能帮忙， CMazz

涂装-details.component.ts

import { Component } from '@angular/core';
import {Painting} from './painting';

@Component({
  selector: 'painting-details',
  templateUrl: 'partials/paintingdetails.html',
  inputs: ['painting'],
  styleUrls: ['css/search-details.css']
})

export class PaintingDetailsComponent{

isHidden: boolean;

constructor(){
    this.isHidden = true;
}

onClick(): void{
    console.log('button clicked yo');
    this.isHidden = !this.isHidden;
}

}

import { Component, OnInit } from '@angular/core';
import { Painting } from './painting';
import { PaintingItemComponent } from './painting-item.component';
import { PaintingDetailsComponent } from './painting-details.component';
import { SearchPipe } from './search-pipe';

@Component({
  selector: 'app-search',
  templateUrl: './partials/search.component.html',
  styleUrls: ['./css/search.component.css']
})
export class SearchComponent{ 
    paintings = PAINTINGS;
    currentPainting: Painting;

    showPainting(item) {
      this.currentPainting = item;
    }

var PAINTINGS: Painting[] = [
  {
      "name": "Color Explosion",
      "shortname": "colorExplosion",
      "reknown": "Acrylic on Cardboard",
      "bio": "I couldn't get enough color."
  }, {
      "name": "Back Street Boys",
      "shortname": "backStreetBoys",
      "reknown": "Acrylic on Cardboard",
      "bio": "I wouldn't want to wander down some alley and find this crew..."
  }, {
      "name": "Arroz Con Pollo",
      "shortname": "arrozConPollo",
      "reknown": "Acrylic on Canvas",
      "bio": "This is Jean Michel Basquiat. I can only admire."
  }, {
      "name": "Stego Starus",
      "shortname": "stegoStarus",
      "reknown": "Acrylic on Cardboard",
      "bio": "This was one of my favorite dinos when I was a kid."
  }, {
      "name": "Two Nobodys",
      "shortname": "twoNobodys",
      "reknown": "Acrylic on Canvas",
      "bio": "These two the best of friends. "
  }, {
      "name": "Number One",
      "shortname": "numberOne",
      "reknown": "Acrylic on Cardboard",
      "bio": "I will always have a special place reserved for this one."
  },
  {
      "name": "Couch Fun",
      "shortname": "couchFun",
      "reknown": "Acrylic on Cardboard",
      "bio": "I consider this my best I guess."
  }
]

paintingdetails.html：这是较大的div，单击预览div时嵌入该div。单击时，此div将消失。但如果执行了新的搜索，并单击了预览div，则不会显示该div。是 因为它的状态仍然是隐藏的

<section *ngIf="isHidden" (click)='onClick()' class="card paintinginfo 
clearfix">

  <div class="painting cf">
  <img src="../../../assets/images/{{painting.shortname}}.jpg" alt=" 
    {{painting.name}}">
   <h1>{{painting.name}}</h1>
   <div class="info">
   <h3>{{painting.reknown}}</h3>
   <div class="longbio">{{painting.bio}}</div>
   </div>
 </div>
</section>

---

单击PaintingDetails组件时，您将isHidden设置为false，并且从不重置它。我猜您也在设置CurrentPaint而没有清除它，这意味着您的PaintingDetailsComponent永远不会重新初始化。我将在onclick中触发一个事件，该事件将重置搜索组件中的当前绘制

onReset() {
  this.currentPainting = null;
}

---

这会立即解决你的问题。您甚至可以完全删除isHidden。

图像不会再次显示，因为CurrentPaint未设置为null，并且PaintingDetails组件不会重新渲染构造函数不会再次激发以重置isHidden，因此仍然为false。在您的painting-details.component.ts中，会发出一个事件来通知父级有关隐藏的信息：

import { Component, Output, EventEmitter } from '@angular/core';
import {Painting} from './painting';

@Component({
  selector: 'painting-details',
  templateUrl: 'partials/paintingdetails.html',
  inputs: ['painting'],
  styleUrls: ['css/search-details.css']
})

export class PaintingDetailsComponent{
  @Output() onHide = new EventEmitter();

  isHidden: boolean;

  constructor(){
    this.isHidden = true;
  }

  onClick(): void{
    this.isHidden = !this.isHidden;
    this.onHide.emit();
  }
}

在search.component中，订阅该事件并将CurrentPaint设置为null

---

您甚至可以从PaintingDetailsComponent中删除isHidden。

尝试使用[hidden]属性，而不是您说的使用[hidden]=isHidden？请添加search.component。ts@CMazz为什么要设置query=onclick of这就是为什么单击后隐藏将执行Patryk gulas可能只是将其设置为null。这取决于它在搜索组件中的初始状态。Malfus感谢您的响应。我也是EventEmitters的新手。我要试试这款Patryk Gułaś。谢谢你花时间，如果它有效的话，我会确保检查你的回答作为解决方案。哦，伙计，帕特里克·古阿·耶尔，一个怪胎般的天才朋友。我很清楚这与应用程序的状态有关。也就是说，父级不知道任何后续隐藏事件，并且通过emit方法将onHide事件和将当前绘制重置为null的调用通知组件，建立了连接。仅供参考，我确实必须将isHidden属性显式定义为boolean，因为我在构建过程中出错，抱怨类型PaintingDetailComponent上不存在isHidden。在任何情况下，我的应用程序现在都能正常工作。非常感谢。

import { Component, Output, EventEmitter } from '@angular/core';
import {Painting} from './painting';

@Component({
  selector: 'painting-details',
  templateUrl: 'partials/paintingdetails.html',
  inputs: ['painting'],
  styleUrls: ['css/search-details.css']
})

export class PaintingDetailsComponent{
  @Output() onHide = new EventEmitter();

  isHidden: boolean;

  constructor(){
    this.isHidden = true;
  }

  onClick(): void{
    this.isHidden = !this.isHidden;
    this.onHide.emit();
  }
}

<div class="paintingsearch">
  <div class="card search">
    <h1 >Répertoire des Oeuvres</h1>
    <input [(ngModel)]="query" placeholder='Type "Stegostarus" or "Color 
         Explosion"...'>
    <label>search <span *ngIf="query"> for: {{query}}</span></label>
  </div>
</div>
<ul *ngIf="query" class="paintingslist cf">
  <li (click)="showPainting(item); query='';" 
      class="painting cf" *ngFor="let item of (paintings) | find:query">
    <painting-item class="content" [painting]=item></painting-item>
  </li>
</ul>
<painting-details 
    *ngIf="currentPainting" 
    [painting]="currentPainting" 
    (onHide)="resetCurrentPainting()"
></painting-details>

import { Component, OnInit } from '@angular/core';
import { Painting } from './painting';
import { PaintingItemComponent } from './painting-item.component';
import { PaintingDetailsComponent } from './painting-details.component';
import { SearchPipe } from './search-pipe';

@Component({
  selector: 'app-search',
  templateUrl: './partials/search.component.html',
  styleUrls: ['./css/search.component.css']
})
export class SearchComponent{ 
  paintings = PAINTINGS;
  currentPainting: Painting;

  showPainting(item) {
    this.currentPainting = item;
  }

  resetCurrentPainting() {
    this.currentPainting = null;
  }

  var PAINTINGS: Painting[] = [
  {
    "name": "Color Explosion",
    "shortname": "colorExplosion",
    "reknown": "Acrylic on Cardboard",
    "bio": "I couldn't get enough color."
  }, {
    "name": "Back Street Boys",
    "shortname": "backStreetBoys",
    "reknown": "Acrylic on Cardboard",
    "bio": "I wouldn't want to wander down some alley and find this crew..."
  }, {
    "name": "Arroz Con Pollo",
    "shortname": "arrozConPollo",
    "reknown": "Acrylic on Canvas",
    "bio": "This is Jean Michel Basquiat. I can only admire."
  }, {
    "name": "Stego Starus",
    "shortname": "stegoStarus",
    "reknown": "Acrylic on Cardboard",
    "bio": "This was one of my favorite dinos when I was a kid."
  }, {
    "name": "Two Nobodys",
    "shortname": "twoNobodys",
    "reknown": "Acrylic on Canvas",
    "bio": "These two the best of friends. "
  }, {
    "name": "Number One",
    "shortname": "numberOne",
    "reknown": "Acrylic on Cardboard",
    "bio": "I will always have a special place reserved for this one."
  },
  {
    "name": "Couch Fun",
    "shortname": "couchFun",
    "reknown": "Acrylic on Cardboard",
    "bio": "I consider this my best I guess."
  }
]