Angular - איך להוציא אירוע מהורה לילד?

אני כרגע משתמש ב-Angular 2. בדרך כלל אנחנו משתמשים ב-@Output() addTab=new EventEmitter<any>(); ואז ב-addTab.emit() כדי לשלוח אירוע לרכיב ההורה.

האם יש דרך לעשות זאת להיפך, מההורה אל הילד?

תשובה #1

באמצעות RxJs, אתה יכול להכריז על Subject ברכיב ההורה שלך ולשלוח אותו כ-Observable לרכיב הילד, רכיב הילד פשוט צריך להירשם ל-Observable הזה.

רכיב-אב

eventsSubject: Subject<void> = new Subject<void>();

emitEventToChild() {
  this.eventsSubject.next();
}

הורה-HTML

<child [events]="eventsSubject.asObservable()"> </child>    

רכיב-ילד

private eventsSubscription: Subscription;

@Input() events: Observable<void>;

ngOnInit(){
  this.eventsSubscription = this.events.subscribe(() => doSomething());
}

ngOnDestroy() {
  this.eventsSubscription.unsubscribe();
}

תשובה #2

למיטב ידיעתי, ישנן שתי דרכים סטנדרטיות לעשות זאת.

1. @קלט

בכל פעם שהנתונים בהורה משתנים, הילד מקבל התראה על כך בשיטת ngOnChanges. הילד יכול לפעול בהתאם. זו הדרך הסטנדרטית של אינטראקציה עם ילד.

// Parent-Component
public inputToChild: Object;
        
// Parent-HTML
<child [data]="inputToChild"> </child>       
        
//Child-Component
@Input() data;

ngOnChanges(changes: { [property: string]: SimpleChange }) {
    // Extract changes to the input property by its name
    let change: SimpleChange = changes['data']; 

    // Whenever the data in the parent changes, this method gets triggered
    // You can act on the changes here. You will have both the previous
    // value and the  current value here.
}

2. מְצַעַד שֵׁרוּת מְשׁוּתָף

יצירת שירות ושימוש ב-Observable בשירות משותף. הילד מנוי עליו וכאשר מתרחש שינוי, הילד יקבל הודעה. זו גם שיטה פופולרית. כאשר רוצים לשלוח משהו שאינו הנתונים שאתה מעביר כקלט, ניתן להשתמש בזה.

// SharedService
subject: Subject<Object> = new Subject<Object>();

// Parent-Component
constructor(sharedService: SharedService)
this.sharedService.subject.next(data);

// Child-Component
constructor(sharedService: SharedService) {
this.sharedService.subject.subscribe((data) => {
    // Whenever the parent emits using the next method,
    // you can receive the data in here and act on it.
});

תשובה #3

ברכיב אב ניתן להשתמש ב-@ViewChild() כדי לגשת לשיטה/משתנה של רכיב ילד.

@Component({
  selector: 'app-number-parent',
  templateUrl: './number-parent.component.html'
})
export class NumberParentComponent {
    @ViewChild(NumberComponent)
    private numberComponent: NumberComponent;
    increase() {
       this.numberComponent.increaseByOne();
    }
    decrease() {
       this.numberComponent.decreaseByOne();
    }
} 

עדכון:

אנגולר 8 ואילך -

@ViewChild(NumberComponent, { static: false })

תשובה #4

השתמש במעטר @Input() ברכיב הבן שלך כדי לאפשר לרכיב ההורה לקשור לקלט הזה.

ברכיב הילד אתה מכריז על זה כך:

@Input() myInputName: myType

כדי לקשר נכס מההורה לילד, עליך להוסיף בתבנית שלך את סוגריי הקישור ושם הקלט שלך ביניהם.

דוגמה :

<my-child-component [myChildInputName]="myParentVar"></my-child-component>

אבל היזהר, עצמים מועברים כהפנייה, אז אם העצם מתעדכן בילד, המשתנה של ההורה יתעדכן גם הוא. זה עלול להוביל להתנהגות בלתי רצויה לפעמים. עם טיפוסים ראשוניים הערך מועתק.

כדי להמשיך קראו את זה :

מסמכים: https://angular.io/docs/ts/latest/cookbook/component-communication.html