angular 8, как использовать компонент несколько раз в родительском компоненте с различными действиями - PullRequest
Новая
       20

angular 8, как использовать компонент несколько раз в родительском компоненте с различными действиями

1 голос
/ 04 февраля 2020

У меня есть компонент, который можно использовать несколько раз в родительском компоненте с другим действием. Как я могу получить событие, выбранное моим компонентом, в родительский.

Мой компонент, который можно использовать несколько раз: 

    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>

как я могу это сделать?

Ответы [ 4 ]

0 голосов
/ 04 февраля 2020

С @Input xyzParameter вы можете вводить значения из родительского компонента в дочерний. В вашем случае таким образом вы можете контролировать поведение ребенка. 

  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
    }
   }

мой родительский компонент 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>
0 голосов
/ 04 февраля 2020

С @ Output

@Output() someClickAction = new EventEmitter<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) {

    }
  }
}

In 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>

Подробнее об этом можно прочитать здесь

0 голосов
/ 04 февраля 2020

используйте вход 

    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>
0 голосов
/ 04 февраля 2020

Использовать EventEmitters (https://angular.io/api/core/EventEmitter). Вы можете запустить EventEmitter с указанным значением c внутри него для родительского компонента, в этом случае вы можете объявить тип карты.

Children: 

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

Parent html: 

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

Родительский тс: 

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