La cuestión es hacer clic en el botón Asignar en el archivo User component.html, debería cargar el otro componente Asignar. Pero al hacer clic en el botón Asignar, aparece el siguiente error en la consola: ERROR TypeError: No se pueden leer las propiedades de undefined (leyendo 'selectTab') Y el error está ocurriendo en el Componente Paper.ts.

No sé cómo inicializar el componente del editor usando el decorador @viewChild

Encuentre el código a continuación:

 Component User.html <button (click)="openAssignOnClick(user)">Assign</button> Component User.ts @Output() assignSection = new EventEmitter(); openAssignOnClick(user) { user.showMessage = true; this.assignSection.emit(); } Similarly, Component Paper.html <div> <div> <editor-tabs #tabComp [initialSelectedTabId]="selectedTab" [options]="tabs" (tabSelected)="handleTabSelection($event)"></editor-tabs> </div> </div> <div> <div> <app-users *ngIf="selectedTab === 'manage-tab'" (assignSection)="openAssignSectionTab()"></app-users> <app-sections *ngIf="selectedTab === 'assign-tab'"></app-sections> </div> </div> Component Paper.ts @ViewChild('tabComp', { static: true }) tabComponent: EditorTabsComponent; tabs: ITab[] = [ { id: 'manage-tab', name: 'Manage Users' }, { id: 'assign-tab', name: 'Assign Sections' }, ]; ngOnInit() { this.loading = true; // only load the manuscript segments and users if the paper is not being saved. this.isSavingSubscription = this._bodyObservable.isSaving$.subscribe(isSaving => { if (!isSaving) { this.dataSubscription = this._metadataObservable.metadata$.pipe( // If the user is not the paper's owner, switch the page, he should not have access here. tap((data: IManuscriptMetadata) => { if (!data.sharing.isOwner) { this._router.navigate(['/', 'write', 'editor', data.docId]); } }), // Continue if the user is not redirected out the page. filter((data: IManuscriptMetadata) => data.sharing.isOwner), tap((data: IManuscriptMetadata) => this.docId = data.docId), switchMap(() => this._collaborateService.GetManuscriptSegmentsAndUsers(this.docId)), tap((result: any) => this._collaborateObservable.update(result.data)) ).subscribe(() => { this.loading = false; const targetPage = this._activeRoute.snapshot.queryParamMap.get('page'); if (targetPage === 'assign') { this.openAssignSectionTab(); } }); this.dataChangeSubscription = this._collaborateObservable.collaborateChange$.subscribe(changed => this.shouldReloadManuscript = changed); } }); } openAssignSectionTab() { this.tabComponent.selectTab(this.tabs[1]); }