我可以在 Angular 中同时使用 @Input 和 @Output 吗?

时间:2021-03-09 05:58:07

标签: angular

我正在使用 @Input 将“值”和“类型”从父组件发送到子组件(这工作正常)。现在,我正在尝试使用 @Output 在单击按钮时从子组件中调用父组件的“删除”方法。

我在子和父组件函数中放置了警报函数。当我单击按钮而不是父母时,我只会看到来自孩子的警报消息。我不知道我缺少什么让孩子向父母发送事件。

子组件:

<div class="btn" (click) = "test()" >
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-filter-tag',
    templateUrl: './filter-tag.component.html',
    styleUrls: ['./filter-tag.component.less'],
})
export class FilterTagComponent implements OnInit {
    @Output() removeItemEvent = new EventEmitter();
    constructor() { }
    value_: string = '';
    type_: string = ''
    @Input()
    set value(value: string) {
      this.value_ = value;
    }
    @Input()
    set type(value: string) {
      this.type_ = value;
    }
    test() {
        this.removeItemEvent.emit();
        alert('Victor');
    }
}

父组件:

<app-filter-tag
   [value]="item.name"
   [type]="item.tagType"
   (removeItemEvent)="remove()"
></app-filter-tag>
ngOnInit() {}

remove() {
  alert('Hugo');
}

0 个答案:

没有答案