将侦听器添加到Nativescript中的自定义可观察组件

时间:2019-05-17 22:42:52

标签: angular nativescript nativescript-angular

我正在尝试让自定义组件在做出选择时通知其用户,但是在接收事件时遇到问题。

Home组件使用自定义组件FavouriteListComponent

home.component.ts

export class HomeComponent implements AfterViewInit, OnDestroy {

    @ViewChild('favouriteList', { read: ElementRef }) fl:ElementRef;
    private favouriteCourses: FavouriteCoursesComponent;

    ...

    ngAfterViewInit(): void {
        this.favouriteCourses = <FavouriteCoursesComponent> this.fl.nativeElement;
        this.favouriteCourses.on('selected_course', function(course_id) {
            console.log("on");
            this.tabsComponent.gotoNewGame(course_id);
        });
        console.log("ngAfterViewInit");
    }

    ngOnDestroy(): void {
        this.favouriteCourses.off("selected_course");
    }

}

home.component.html

    <GridLayout row="4">
        <ns-favouritecourses #favouriteList></ns-favouritecourses>
    </GridLayout>

favouritecourses.component.ts

@Component({
  selector: 'ns-favouritecourses',
  ...
})
export class FavouriteCoursesComponent extends Observable implements OnInit {

  ...

  playCourse(courseId: number): void {
    console.log("notifying...");
    this.notifyPropertyChange('selected_course', courseId);
  }

}

在日志中,我可以看到该事件是通过“ notify”发送的,但是在侦听器中从未收到该事件,尽管该侦听器似乎添加得很好,尽管可能不是。

如何将事件从FavouriteListComponent发送到HomeComponent

1 个答案:

答案 0 :(得分:0)

您应该只使用事件发射器,并在需要时订阅事件。

HTML:

  <ns-favouritecourses (selected_course)="changed(this)" #favouriteList></ns-favouritecourses>

TS:

@Output() Change: EventEmitter<any> = new EventEmitter();

  changed(value : any){
    this.Change.emit(value);
  }