web-dev-qa-db-ja.com

click（$ event）Angular 4の後にコンポーネントを表示する

別のコンポーネントを起動したクリックボタンでイベントを作成しようとしています。もう一度クリックすると、コンポーネントが減少します（表示されているコンポーネントの一部が常に表示されます）。これは[ngClass] = '同じコンポーネントにすべてを隠しますが、モジュール性の面でその最善の方法であるかどうかはわかりません。前もって感謝します

これが私のhtmlです。

<div class="daydetail">
     <h1>Detail of the day</h1>
     <button type="button" label="Click"(click)="display('my-displaychild')"></button>
     <div>{{my-displaychild}}</div>
</div>

これが私のコンポーネントです。

import { DisplayChildComponent } from './displaychild.component';

export class AppliV2Component   { 


    display(vid:DisplayChildComponent) {
           console.log(DisplayChildComponent);
    }


 }
angularmouseclick-event
6
Emile Cantero

*ngIfを使用してシンプルにする必要があり、ブール値を子コンポーネントに渡して、@Inputデコレータを使用して必要な部分のみを非表示にできると思います

1.親HTML

<div class="daydetail">
     <h1>Detail of the day</h1>
     <button type="button" label="Click" (click)="toggleChild()"></button>
     <div>
         <child-component [showMePartially]="showVar"></child-component>
     </div>
</div>

2.親コンポーネント

export class AppliV2Component {
    showVar: boolean = true;

    toggleChild(){
        this.showVar = !this.showVar;
    }
 }

3.子コンポーネント

export class ChildComponent {
    @Input() showMePartially: boolean;

    // don't forget to import Input from '@angular/core'
}

4.子HTML

<div>
    <h1> this part is always visible</h1>
</div>

<div *ngIf="showMePartially">
    <h1> this part will be toggled by the parent component button</h1>
</div>
21
Hamed Baatour

製品のAPIがあります。それらをリストしました。ユーザーはこのアイテムをカートに追加できます。

<div>
  <ul class="list-group">
  <li *ngFor="let product of products" class="list-group-item">
    <button (click)="addToCart(product)" class="btn btn-xs btn-primary pull-right">
      <i class="glyphicon glyphicon-plus"></i>
      Add To Cart
    </button>
    <h5><strong>{{product.productName}}</strong></h5>
    <p> {{product.quantityPerUnit}}</p>
    <h6>{{product.unitPrice}}</h6>
  </li>

メソッドはこのようなものです。

addToCart(product:Product){
this.addedProduct=product.productName;
this.notificationsService.success("Successfull",product.productName +" added to CART")
  }
0
aemre