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

valid()

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

export class BasketComponent {

@Input() isClassVisible: boolean; 

    constructor() {

    }

}

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

1 个答案: