Question

更新以更好地说明我要做的事情：

我想使用反射类型方法来基本禁用某些功能，并在父组件处理事件时更新演示文稿。

示例：

想象一下GroceryCart的组件树，其中包含一个GroceryItem列表。 GroceryItem具有onDelete和onQuantityEdit的输出事件。这些事件由GroceryItem发送到父GroceryCart组件以处理这些特定事件。

现在用户正在结帐，您正在显示一个包含GroceryItem列表的ConfirmCheckOut组件。在ConfirmCheckOut组件中，用户不再删除项目或更新数量，因此ConfirmCheckOut组件不处理GroceryItem发出的OnDelete或OnQuantityEdit事件。

如果GroceryItem知道它的父组件没有处理这些事件，那么它可以更新它自己的UI，以便隐藏功能。因此，如果父级是ConfirmCheckOut，那么GroceryItem组件可以隐藏它的删除和更新数量按钮。如果父级是GroceryCart，则删除和更新数量按钮将存在并且可供用户使用。

在Angular 2中有没有办法做到这一点？

Answer 1

您可以尝试（我不建议）将父级注入您的子组件并检查其原型以获取所需的功能。

export class ChildComponent {
    private hasAddItem = false;

    constructor(@Host() parentComponent: ParentComponent){
        this.hasAddItem = !!parentComponent.protoType.addItem;
    }
}

Answer 2

以下代码显示在App组件的HTML

中

<grocery-cart [cartItems]="selectedItems"> </grocery-cart>
<grocery-products (selectedItem)="handleSelecteditem($event)"> </grocery-products>

AppComponent应该处理事件add将它添加到selectedItems变量中，如下所示

handleSelecteditem(item:Product){
    this.selectedItems.push(item);
}

杂货店购物车应包含以下代码

template:`
    <div *ngFor="let product in products">
        <image >
        <description>
    </div>
    <button (click)="checkout()"> Checkout </button>
`
@Input() cartItems :Array<Product>

杂货 - 产品组件代码必须类似于

template:`
    <div *ngFor="let product in products">
        <image >
        <description>
        <button (click)="addToCart(product)"> Add to Cart </button>
    </div>
`

变量：

@Output() selectedItem:EventEmitter<Product>=new EventEmitter<Product>();
products:Array<Product>;

方法：

addToCart(item : Product){
        this.selectedItem.emit(item);
    }

我已经创建了一个如上所述的摘要，但这会根据您的应用程序的复杂程度和架构而发生变化

Angular 2确定是否处理了事件

2 个答案: