'child-selector' не является известным элементом Angular 2

Question

Я пытаюсь выполнить связь от дочернего компонента к родительскому компоненту при определенных действиях.Для этой цели я использую библиотеки EventEmitter и Output.Я покажу вам, что я сделал до сих пор.

Вот мой дочерний компонент файл sports-list.component.ts

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-sportslist',
    templateUrl: './sportslist.component.html'
})

export class SportsListComponent {
    @Output()
    contentUpdated = new EventEmitter<string>();

    ngOnInit() {
        this.contentUpdated.emit('complete');
    }
}

Вот мой родительский компонент file top-navigation.component.ts

import { SportsListComponent } from '../../sportslist/sportslist.component';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-ui-top-navigation',
  templateUrl: './top-navigation.component.html',
  styleUrls: ['./top-navigation.component.css']
}) 


export class TopNavigationComponent implements OnInit {
    get_data(event) {
        console.log('event trigger');
        console.log(event);
    }
}

My top-navigation.component.html

<app-sportslist (contentUpdated)="get_data($event)">

</app-sportslist>

Это все, что мой код выглядит, когда я пытаюсь построить этот код, я получаю ошибку ниже на моем экране-

ОШИБКА в ошибках разбора шаблона: «app-sportslist» не является известным элементом: 1. Если «app-sportslist» является угловым компонентом, то убедитесь, что он является частью этого модуля.2. Если 'app-sportslist' является веб-компонентом, добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.("

[ОШИБКА ->]"): ng: ///var/www/html/budgetbet/BudgetBetWebSite/src/app/shared/top-navigation/top-navigation.component.html@419: 0

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

Shared.module.ts

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { TopNavigationComponent } from './top-navigation/top-navigation.component'; 
import { RouterModule } from '@angular/router';

@NgModule({   
    declarations: [
        TopNavigationComponent,
        SportsListComponent   
    ] 
}) 
export class SharedModule {}

Answer 1

Эта статья помогла мне понять беспорядочный импорт компонентов в Angular https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407

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

Еслиони в разных модулях экспортируют дочерний модуль и импортируют его в родительский модуль

Если они находятся в одном и том же модуле, убедитесь, что вы объявили оба компонента.Может быть, это просто опечатка в этом примере, но похоже, что в вашем Shared.module.ts

import {SportsListComponent} из ../../sportslist/sportslist.component';

отсутствует следующая строка

Но основная структура выглядит следующим образом:

//...imports

@NgModule({
  imports: [           
    //for modules
  ],
  providers: [   
    //for services
  ],
  declarations: [  
    //for components
  ],
  exports: [/*elements to be shared with other modules*/],
  entryComponents: [],
})

//...

Answer 2

Добавьте дочерний компонент к объявлениям в модуле

declarations: [
    ...,
    SportsListComponent
],