gpt4 book ai didi

javascript - Angular 2组件指令不起作用

转载 作者:太空狗 更新时间:2023-10-29 16:50:56 27 4
gpt4 key购买 nike

我是 Angular 2 的初学者,我想让我的第一个应用正常运行。我正在使用 typescript 。我有 app.component.ts,我在其中向另一个名为 todos.component 的组件发出指令,但在编译时出现以下错误:

[0] app/app.component.ts(7,3): error TS2345: Argument of type '{ moduleId: string; selector: string; directives: typeof TodosComponent[]; templateUrl: string; s ...' is not assignable to parameter of type 'Component'.
[0] Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

我的代码是这样的:

index.html

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<app-root>Loading...</app-root>
</body>
</html>

app.component.ts

import { Component } from '@angular/core';
import {TodosComponent} from './todos/todos.component';

@Component({
moduleId : module.id,
selector: 'app-root',
directives: [TodosComponent],
templateUrl : 'app.component.html',
styleUrls : ['app.component.css']
})

export class AppComponent {
title: string = "Does it work?";
}

app.component.html:

<h1> Angular 2 application</h1>
{{title}}
<app-todos></app-todos>

todos.component.ts

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

@Component({
moduleId : module.id,
selector: 'app-todos',
template: '<h2>Todo List</h2>'
})

export class TodosComponent {
title: string = "You have to do the following today:";
}

没有指令,应用程序可以正常工作。任何帮助,将不胜感激!

提前致谢!

最佳答案

在您的 app.component.ts 中定义 directive: [TodosComponent]。在 RC6 中,指令属性已从 @Component() 装饰器中删除。

解决这个问题的方法是:

  1. 创建一个 NgModule 和
  2. declarations: [] 数组中声明 TodosComponent。

请参阅此处的 AppModule 示例:

https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

关于javascript - Angular 2组件指令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39658186/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com