小编nat*_*312的帖子

如果'<x>'是Angular组件,则验证它是否是此模块的一部分

我在使用Angular的组件时遇到了麻烦.我的应用只使用一个模块(app.module).我创建了一个名为'BooksComponent'的组件,其中包含一个用于html的选择器'app-books'.当我在app.component中使用它时,我收到此错误:

'app-books'不是已知元素:1.如果'app-books'是Angular组件,请验证它是否是此模块的一部分.2.如果'app-books'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息.

我的代码是这样的:

books.component.ts

import { Component, OnInit } from '@angular/core';
import { Book } from '../book';
import { BOOKS } from '../mock-books';


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

        books = BOOKS;
        selectedBook : Book;

  constructor() { }

  ngOnInit() {
  }

}

Run Code Online (Sandbox Code Playgroud)

app.component.ts

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


@Component({
  selector: 'app-root',
  template: `<h1>{{title}}</h1>
            <app-books></app-books>`
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'BookShelf';
}

Run Code Online (Sandbox Code Playgroud)

最后: app.module.ts