クリック時に子コンポーネントにプロパティ値を送信

Question

入出力を理解するのが難しく、ボタンをクリックしたときにコンポーネントから別のコンポーネントにデータを渡す方法があります。

今私はAppComponent（親）とBasketComponent（子供）を持っています。見ての通り、私はバスケットの構成要素にisClassVisibleプロパティに渡すようにしようとしているappComponent.ts

export class App { 
    name = 'WebShop Angular2 App'; 
    url = ''; 
    isClassVisible: boolean = false; 

    constructor(public appState: AppState) { 

    } 
} 

からappComponent.htmlから

コード

<div class="column small-2 navigation-menu-right"> 
    <span class="basket"><li><a (click)="isClassVisible = !isClassVisible;" href="#"><img src="/assets/img/basket24.png" title=""/></a></li></span> 
</div> 

<basket-component [isClassVisible]="isClassVisible"></basket-component> 

コード。 appComponentのバスケットボタンをクリックすると、この値が子のbasketComponentに送信されます。 basketComponent.html

から

コード

<aside class="aside" [ngClass]="{'aside-active': isClassVisible}"> 

isClassVisibleがtrueの場合、それはaside-activeクラスを追加する必要がありますので、私は、ngClassを使用しています。 basketComponent.ts

@Injectable() 
export class BasketComponent { 

@Input() isClassVisible: boolean; 

    constructor() { 

    } 

} 

から

コードは、1つのコンポーネントで自分のコードをテストしており、ここでは動作しますが、それを分割したいので、私はbasketComponentを持っています。

入力を正しく使用する方法を教えてください。

更新：

<aside class="aside" [ngClass]="{'aside-active': isClassVisible }"> 
<div class="products_in_basket"> 
    <div class="product_header"> 
     product header 
    </div> 
    <div class="product_content"> 
     <span class="product_quantity">4 stk</span> 
     <span class="product_price">1999</span> 
    </div> 
</div> 
<div class="products_in_basket"> 

</div> 
<div class="price_in_basket"> 
    <ul> 
     <li>price here</li> 
     <li>total number</li> 
    </ul> 
</div> 
<div class=""> 
    <ul> 
     <button>Button</button> 
    </ul> 
</div> 
</aside> 

何らかの理由でngClassはさておき、私が行ったように、トップタグに使用されている場合、それは動作しません。

<aside class="aside"> 
    <div class="products_in_basket" [ngClass]="{'aside-active': isClassVisible }"> 

それは動作しますが、私はまだ全体asideを表示/非表示する必要があります。

私がもしこのような何かを行います。 asideの代わりにdivと試してみても同じ結果が得られます。

Answer 1

作業のデモ - https://plnkr.co/edit/wvEMRl5jP1zeyi6TDJFr?p=preview

//@Injectable() //<------This is not required 

export class BasketComponent { 

@Input() isClassVisible: boolean; 

    constructor() { 

    } 

} 

---

export class App { 
    name = 'WebShop Angular2 App'; 
    url = ''; 
    isClassVisible: boolean = false; 

    constructor(public appState: AppState) { 

    } 
}