Question

我正在构建一个与MVC 5集成的Angular 4应用程序。我正在创建一个Movie组件，其中包含一个模板，我将其注入app.component.html。我已经在app.module中对movie组件进行了必要的引用，但是我得到了错误

'app-movie' is not a known element:
1. If 'app-movie' is an Angular component, then verify that it is part of this module.
If 'app-movie' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<div>
    <h1>{{pageTitle}}</h1>
    [ERROR ->]<app-movie></app-movie>
</div>

")

代码如下

app.module

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserModule} from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MovieModule } from '../movie/movie.module';
import { MovieComponent } from '../movie/movie.component';


@NgModule({
    imports: [
              BrowserModule,
              FormsModule,
              HttpModule,
              MovieModule
    ],
    declarations: [AppComponent, MovieComponent],
    bootstrap: [AppComponent]
})

export class AppModule {

}

app.component.ts

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

@Component({
    selector: "mrdb-app",
    templateUrl: "./Scripts/app/app.component.html"

})


export class AppComponent {

    pageTitle: string = "Movies Review Database";

}

app.component.html

<div>
    <h1>{{pageTitle}}</h1>
    <app-movie></app-movie>  //This selector belongs to movie component
</div>

movie.component.ts

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

@Component({
    selector: 'app-movie',
    templateUrl: './Scripts/movie/movie-list.component.html'

})
export class MovieComponent implements OnInit {

    pageTitle: string = "Movie List";

    constructor() { }

    ngOnInit() {
    }

}

Movie-list.component.html
//Assume I have written a logic to display list of movies

Movie-Add.component.html
//Assume I have written a html for data entry screen

电影模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MovieComponent } from './movie.component';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [MovieComponent],
    exports: [MovieComponent]
})
export class MovieModule { }

Answer 1

删除 MovieComponent 从 AppModule ，它将充当共享组件，因为您已导入模块 { {1}}

MovieModule

Answer 2

由于您已将imported MovieModule导入app.module，并且MovieComponent已从中导出，因此无需在app.module中明确declare MovieComponent

尝试以下代码

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserModule} from "@angular/platform-browser";
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MovieModule } from '../movie/movie.module';


@NgModule({
    imports: [
              BrowserModule,
              FormsModule,
              HttpModule,
              MovieModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {

}

错误选择器不是角度中的已知元素

2 个答案: