Javascript 角度2。无法将一个组件插入到另一个组件。模板分析错误:…不是已知元素
我试图重复教程中的操作,将一个组件添加到另一个组件中,但失败了 项目结构: app.component.ts:Javascript 角度2。无法将一个组件插入到另一个组件。模板分析错误:…不是已知元素,javascript,angular,Javascript,Angular,我试图重复教程中的操作,将一个组件添加到另一个组件中,但失败了 项目结构: app.component.ts: import {Component} from "@angular/core" import {TodoListComponent} from "./todo-list/todo-list.component" .... @Component({ moduleId: module.id, selector: "app", templateUrl: "app.
import {Component} from "@angular/core"
import {TodoListComponent} from "./todo-list/todo-list.component"
....
@Component({
moduleId: module.id,
selector: "app",
templateUrl: "app.component.html",
styleUrls: ['app.component.css'],
directives:[ TodoListComponent ]
})
export class AppComponent {
...
}
app.component.html:
...
<todo-list ></todo-list> <!--[todos]="todos"-->
...
待办事项列表.component.html
ololololo
Rmain.ts
import {Component, Input} from "@angular/core"
//import {Input} from "../../node_modules/@angular/core/src/metadata/directives";
@Component({
selector: "todo-list",
templateUrl: "./app/todo/todo-list.component.html"
})
export class TodoListComponent {
//@Input() todos:Todo[];
}
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app.module";
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component"
import {FormsModule} from "@angular/forms";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
应用程序模块.ts
import {Component, Input} from "@angular/core"
//import {Input} from "../../node_modules/@angular/core/src/metadata/directives";
@Component({
selector: "todo-list",
templateUrl: "./app/todo/todo-list.component.html"
})
export class TodoListComponent {
//@Input() todos:Todo[];
}
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app.module";
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component"
import {FormsModule} from "@angular/forms";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
我打开浏览器,看到以下内容:
zone.js:388 Unhandled Promise rejection: Template parse errors:
'todo-list' is not a known element:
1. If 'todo-list' is an Angular component, then verify that it is part of this module.
2. If 'todo-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("lass="todo-item" *ngFor="let todo of todos" [ngClass]="{'completed': todo.completed }">-->
[ERROR ->]<todo-list ></todo-list> <!--[todos]="todos"-->
</section>
</main>
"): AppComponent@14:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'todo-list' is not a known element:
1. If 'todo-list' is an Angular component, then verify that it is part of this module.
2. If 'todo-list' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("lass="todo-item" *ngFor="let todo of todos" [ngClass]="{'completed': todo.completed }">-->
[ERROR ->]<todo-list ></todo-list> <!--[todos]="todos"-->
</section>
</main>
"): AppComponent@14:8
at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:7728:21)
at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17503:53)
at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17423:64)
at Set.forEach (native)
at RuntimeCompiler._compileComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17423:21)
at createResult (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17319:21)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:114:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:502:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)consoleError @ zone.js:388_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:390 Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:390_loop_1 @ zone.js:417drainMicroTaskQueue @ zone.js:421ZoneTask.invoke @ zone.js:339
zone.js:388未处理的承诺拒绝:模板分析错误:
“待办事项列表”不是已知元素:
1.如果“待办事项列表”是一个角度组件,请确认它是此模块的一部分。
2.如果“todo list”是Web组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。(“lass=“todo item”*ngFor=“let todo of todo”[ngClass]=“{'completed':todo.completed}”>-->
[错误->]
"): AppComponent@14:8 ; 区域:;任务:承诺;值:错误:模板分析错误:(…)错误:模板分析错误:
“待办事项列表”不是已知元素:
1.如果“待办事项列表”是一个角度组件,请确认它是此模块的一部分。
2.如果“todo list”是Web组件,则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”以抑制此消息。(“lass=“todo item”*ngFor=“let todo of todo”[ngClass]=“{'completed':todo.completed}”>-->
[错误->]
"): AppComponent@14:8
在TemplateParser.parse(http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:7728:21)
在运行时编译器上(http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17503:53)
评估时(http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17423:64)
at Set.forEach(本机)
在运行时编译器上(http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17423:21)
在createResult(http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:17319:21)
在ZoneDelegate.invoke(http://localhost:3000/node_modules/zone.js/dist/zone.js:232:26)
在Zone.run(http://localhost:3000/node_modules/zone.js/dist/zone.js:114:43)
在http://localhost:3000/node_modules/zone.js/dist/zone.js:502:57
在ZoneDelegate.invokeTask(http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)consoleError@zone.js:388_loop_1@zone.js:417drainMicroTaskQueue@zone.js:421ZoneTask.invoke@zone.js:339
zone.js:390错误:未捕获(承诺中):错误:模板解析错误:(…)consoleError@zone.js:390_loop_1@zone.js:417drainMicroTaskQueue@zone.js:421ZoneTask.invoke@zone.js:339
请给我指出错误。我反复检查了几次教程,没有发现错误。从
AppComponent
声明中删除指令:[TodoListComponent]
,并将此组件的声明添加到模块中,如下所示:
declarations: [AppComponent, TodoListComponent],
将todo-list.component.ts的Url更改为
@Component({
selector: "todo-list",
templateUrl: "./app/todo-list/todo-list.component.html"
})
从
AppComponent
声明中删除指令:[TodoListComponent]
,并将此组件的声明添加到模块中,如下所示:
declarations: [AppComponent, TodoListComponent],
将todo-list.component.ts的Url更改为
@Component({
selector: "todo-list",
templateUrl: "./app/todo-list/todo-list.component.html"
})
删除app.component.ts中的字段“directives”,并在app.module.ts的声明中添加“TodoListComponent” 你的app.module.ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component"
import {TodoListComponent} from "./todo-list/todo-list.component"
import {FormsModule} from "@angular/forms";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, TodoListComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
删除app.component.ts中的字段“directives”,并在app.module.ts的声明中添加“TodoListComponent” 你的app.module.ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component"
import {TodoListComponent} from "./todo-list/todo-list.component"
import {FormsModule} from "@angular/forms";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [AppComponent, TodoListComponent],
bootstrap: [AppComponent]
})
export class AppModule {
}
@Joel-Almeida的可能副本我在教程中没有看到这一点你是如何声明你的模块的?@Joel-Almeida如果我理解你的意思,请更正Rmain.ts中包含的这一信息你能提供你的
AppModule
代码吗?可能的副本@Joel-Almeida我在教程中没有看到这一点你是如何声明你的模块的?@Joel-Almeida如果我了解您是否更正了Rmain.ts中包含的此OnFormation您能否提供您的AppModule
代码?