单击时将属性值发送到子组件

Question

我在理解输入/输出、点击按钮时如何将数据从一个组件传递到另一个组件时遇到了一些困难。

现在我有AppComponent（父）和BasketComponent（子）。

来自 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.ts 的代码

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

    constructor(public appState: AppState) {

    }
}

如您所见，我正在尝试将isClassVisible 属性传递给购物篮组件。当您单击appComponent 中的篮子按钮时，它应该将此值发送给子basketComponent。

来自 basketComponent.html 的代码

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

我使用的是ngClass，所以如果isClassVisible 为真，它应该添加aside-active 类。

来自 basketComponent.ts 的代码

@Injectable()
export class BasketComponent {

@Input() isClassVisible: boolean; 

    constructor() {

    }

}

已经在一个组件中测试了我的代码，在这里它可以工作，但想拆分它，所以我有一个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。还尝试使用div 而不是aside，结果相同。

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) {

    }
}