angular8 如何在父组件中使用不同的动作多次使用组件

Question

我有一个组件可以在父组件中使用不同的操作多次。我如何将我的组件点击事件发送给父级。

我的可以多次使用的组件：

    import {Component} from 'angular2/core';

    @Component({
        selector: 'my-card',
        template: `<button (click)="onClickMe()">select</button>`
    })
    export class MyCardComponent {
    onClickMe() {
       //if my-card in parent component is type 1 do some thing
       //if my-card in parent component is type 2 do some thing
    }
   }

我的父组件 html：

<div>
   <p>Type 1<p>
  <my-card></my-card>
</div>

<div>
    <p>Type 2<p>
  <my-card></my-card>
</div>

我该怎么做？

Answer 1

使用事件发射器（https://angular.io/api/core/EventEmitter）。您可以将其中包含特定值的 eventEmitter 发射到 parent 组件，在这种情况下您可以声明卡片类型。

Children:

onClickMe() {
       this.myEventEmitter.emit( // any data)
    }

Parent html:

<my-card (myEventEmitter)="anyFunction($event)></my-card>

Parent ts:

anyFunction(args) {
       // Do something by type that is declared in args
    }

Answer 2

使用@Output

@Output() someClickAction = new EventEmitter<void>();

您也可以发送一些数据，只需将 void 更改为正确的数据类型即可。

然后在 onClickMe() 中调用 emit someClickAction 属性。

import {Component, EventEmitter, Output} from '@angular/core';

@Component({
  selector: 'my-card',
  template: `<button (click)="onClickMe()">select</button>`
})
export class MyCardComponent {
  @Output() someClickAction = new EventEmitter<void>();

  onClickMe() {
    this.someClickAction.emit();

  }
}

在 html 中看起来像这样。

<div>
  <p>Type 1</p>
  <my-card (someClickAction)="someFunction()"></my-card>
</div>

<div>
  <p>Type 2</p>
  <my-card (someClickAction)="someOtherFunction()"></my-card>
</div>

使用@Input()

在这里您不会将有关点击的信息发送给子项，但您将在父项中指定类型，子项将根据该值进行操作。

通过 @Input 为您的组件指定属性

import {Component, EventEmitter, Input} from '@angular/core';

@Component({
  selector: 'my-card',
  template: `<button (click)="onClickMe()">select</button>`
})
export class MyCardComponent {
  @Input() type: number;

  onClickMe() {
    if(this.type === 1) {

    } else if(this.type === 2) {

    }
  }
}

在HTML

<div>
  <p>Type 1</p>
  <my-card [type]="1"></my-card>
</div>

<div>
  <p>Type 2</p>
  <my-card [type]="2"></my-card>
</div>

您可以阅读更多相关内容here

Answer 3

使用输入

    import {Component} from 'angular2/core';

    @Component({
        selector: 'my-card',
        template: `<button (click)="onClickMe()">select</button>`
    })
    @Input() type;
    export class MyCardComponent {
    onClickMe() {
       if (this.type === 1= {
           // do something
       } else {// do something }
    }
   }

如果您有更多类型，请使用开关...您的父组件 html :

<div>
   <p>Type 1<p>
  <my-card [type]=1></my-card>
</div>

<div>
    <p>Type 2<p>
  <my-card [type]=2></my-card>
</div>

Answer 4

使用@Input xyzParameter，您可以将parent 组件的值输入到child。在你的情况下，你可以控制 childs 的行为。

  import {Component} from 'angular2/core';

    @Component({
        selector: 'my-card',
        template: `<button (click)="onClickMe()">select</button>`
    })
    export class MyCardComponent {

    @Input() type: number; // that value is taken from the parent´s template

    onClickMe() {
       //if my-card in parent component is type 1 do some thing
       //if my-card in parent component is type 2 do some thing
    }
   }

我的 parent 组件 html ：

<div>
   <p>Type 1<p>
  <my-card [type]="1"></my-card>
</div>

<div>
    <p>Type 2<p>
  <my-card [type]="2"></my-card>
</div>

angular8 如何在父组件中使用不同的动作多次使用组件

angular 8 how to use component multiple times in parent component with different action

angular

angular2-routing

angular8

使用@Output

使用@Input()