时间戳

首页 > 解决方案 > 'child-selector' 不是已知元素 Angular 2

angular - 'child-selector' 不是已知元素 Angular 2

问题描述

我正在尝试在某些操作上执行从子组件到父组件的通信。为此，我正在使用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');
    }
}

这是我的父组件文件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);
    }
}

我的top-navigation.component.html

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

</app-sportslist>

这就是我的所有代码的样子，当我尝试构建此代码时，我的屏幕上出现以下错误 -

ERROR in Template parse errors: 'app-sportslist' 不是已知元素： 1. 如果 'app-sportslist' 是 Angular 组件，则验证它是否是该模块的一部分。2. 如果 'app-sportslist' 是一个 Web 组件，则将 '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 {}

标签： angularexpressangular2-template

解决方案

将子组件添加到模块中的声明中

declarations: [
    ...,
    SportsListComponent
],

推荐阅读