Question

现在已经用了很长时间，试图找出为什么父母没有收到事件并调用该函数。

拥有父应用程序（称为AppComponent）和子组件（称为HomeComponent）

HomeComponent.ts

@Component({
selector: 'home-component',
providers: [],
moduleId: module.id,
encapsulation: ViewEncapsulation.None,
templateUrl: 'home.component.html',
styleUrls: ['home.component.css'],
directives: [BannerComponent],
})

export class HomeComponent {

    @Output() selected = new EventEmitter<boolean>();

    products: Array<Product> = [];

    isProductSelected: boolean = false;

    constructor(public productService: ProductService) {


    }

    addProductToBasket(product: Product) {

        // Add product to basket.
        this.productService.addProduct(product);
        this.isProductSelected = true;

        if (this.isProductSelected) {
            console.log("Event has been emittet");
            this.selected.emit(this.isProductSelected);

            //Sets to default
            this.isProductSelected = false;
        }   

    }

}

我想在产品添加到购物篮时通知父组件。已经检查过控制台，并且可以看到 console.log（＆＃34;事件已经被发射＆＃34;）; 一行被调用，所以它应该发送事件。

AppComponent.html

<aside class="aside" [ngClass]="{'aside-active': isClassVisible }">
     <div class="basket_products" *ngFor="#product of products">


    </div>
</aside>

<router-outlet (selected)="selected($event)"></router-outlet>

在我尝试使用（已选择）=＆＃34;已选择（$ event）＆＃34; 之后我会使用ngFor，这应该调用该方法AppComponent.ts

AppComponent.ts

 selected(selected: boolean) 
 {
    console.log("Event catches");

    if (selected) {

        // Get new data
        this.totalProducts = this.productService.getTotalProducts();
        this.totalprice = this.productService.getTotalProductPrice();
        this.shippingPrice = this.productService.getShippingPrice();
    }
}

问题是永远不会调用该方法。

尝试按照步骤＆＃34;家长听取儿童事件＆＃34;你在这里看到Angluar2 interactions：

有人在这里，看到我做错了吗？

Answer 1

这段代码没有意义

@Injectable()
export class HomeComponent {

    @Output() selected = new EventEmitter<boolean>();

要么它是一个组件，那么它需要一个@Component(...)装饰器而不是@Injectable()装饰器。

如果是服务，那么它就不能拥有@Output()

如果它实际上是一个组件，那么你只能听这个组件

<home-component (selected)="selected($event)"></home-component>

不在任意元素上。这不会收听@Output() selected ...

 <div class="basket_products" *ngFor="#product of products" (selected)="selected($event)">

除非HomeComponent有selector: '.basket_products'

之类的选择器

Angular2 eventEmitter，父母不会抓住它

1 个答案: