自定义组件不是Angular CLI应用程序中的已知元素

时间:2020-01-14 12:51:42

标签: javascript angular components angular-cli

我正在考虑使用Angular CLI学习Angular 8。

我在核心模块中添加了两个新组件,然后将它们导入到应用程序模块中。

当我尝试在我的应用html中呈现组件时,控制台中会引发“未知元素”错误。

我不确定为什么吗?

这是我的app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
import { CoreModule } from "./core/core.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NoopAnimationsModule, CoreModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

我的core.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { InputComponent } from "../input/input.component";
import { GraphComponent } from "../graph/graph.component";

@NgModule({
  declarations: [InputComponent, GraphComponent],
  imports: [CommonModule],
  exports: [InputComponent, GraphComponent]
})
export class CoreModule {}

app.component.html

<div>
  <InputComponent></InputComponent>
  <GraphComponent></GraphComponent>
</div>

其中一个自定义组件的示例:

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

1 个答案:

答案 0 :(得分:5)

我只是意识到我没有使用正确的选择器来引用组件!

我应该使用app-input中的app-graphapp.component.html