จะถ่ายทอดเหตุการณ์จากพ่อแม่สู่ลูกได้อย่างไร?

ฉันกำลังใช้ Angular 2 โดยปกติแล้วเราจะใช้@Output() addTab = new EventEmitter<any>();แล้วaddTab.emit()ปล่อยเหตุการณ์ไปยังองค์ประกอบหลัก

มีวิธีใดบ้างที่เราสามารถทำได้รองลงมาจากรุ่นแม่สู่รุ่นลูก?

ใช้RxJsคุณสามารถประกาศSubjectในองค์ประกอบที่ผู้ปกครองของคุณและผ่านมันเป็นองค์ประกอบเด็กองค์ประกอบเด็กเพียงแค่ต้องสมัครเป็นสมาชิกนี้ObservableObservable

องค์ประกอบหลัก

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. แนวคิดการบริการร่วมกัน

การสร้างบริการและการใช้งานที่สังเกตได้ในบริการที่ใช้ร่วมกัน เด็กสมัครรับข้อมูลและเมื่อใดก็ตามที่มีการเปลี่ยนแปลงเด็กจะได้รับการแจ้งเตือน นี่เป็นวิธีที่นิยมเช่นกัน เมื่อคุณต้องการส่งสิ่งอื่นนอกเหนือจากข้อมูลที่คุณส่งผ่านเป็นอินพุตสามารถใช้ได้

SharedService
subject: 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.})

ในองค์ประกอบหลักคุณสามารถใช้ @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();
    }
} 

อัปเดต:

Angular 8 เป็นต้นไป -

@ViewChild(NumberComponent, { static: false })

ใช้มัณฑนากร @Input () ในคอมโพเนนต์ลูกของคุณเพื่ออนุญาตให้พาเรนต์เชื่อมโยงกับอินพุตนี้

ในองค์ประกอบลูกคุณประกาศว่าเป็น:

@Input() myInputName: myType

ในการผูกคุณสมบัติจากพาเรนต์กับชายน์คุณต้องเพิ่มแบร็กเก็ตการโยงและชื่ออินพุตของคุณระหว่างเทมเพลต

ตัวอย่าง:

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

แต่ระวังอ็อบเจ็กต์จะถูกส่งผ่านเป็นการอ้างอิงดังนั้นหากอ็อบเจ็กต์ได้รับการอัพเดตในเด็ก var ของพาเรนต์จะได้รับการอัปเดตมากเกินไป ซึ่งอาจนำไปสู่พฤติกรรมที่ไม่ต้องการในบางครั้ง ด้วยประเภทหลักค่าจะถูกคัดลอก

หากต้องการอ่านต่อไปนี้:

เอกสาร: https://angular.io/docs/ts/latest/cookbook/component-communication.html

ภายในพาเรนต์คุณสามารถอ้างอิงเด็กโดยใช้ @ViewChild เมื่อจำเป็น (เช่นเมื่อเหตุการณ์จะเริ่มทำงาน) คุณสามารถเรียกใช้เมธอดในลูกจากผู้ปกครองโดยใช้การอ้างอิง @ViewChild