在index.html中不显示Angular 2组件(Angular 2 Component Not Displaying in index.html)

我对Angular 2很新，所以请耐心等待。我试图让一个新组件出现在index.html页面中。文件集来自GitHub的基本快速启动文件。我创建了一个新组件：

import { Component } from '@angular/core'; @Component({ selector: 'app-user-item', template: `<h1>It works!</h1>`, }) export class UserItemComponent { }

我已经在HTML中声明了选择器标签：

<!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <base href="/"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">  <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/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('main.js').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> <app-user-item>loading another component</app-user-item> </body> </html>

我甚至尝试将导入到app.module.ts和组件名称的顶部添加到app.module.ts中的声明数组。但仍然没有。我检查了我的文件结构，并有一个js版本的user-item.component.ts。但我看不出变化。

任何帮助，将不胜感激。

干杯

Im very new to Angular 2 so bear with me. Im trying to get a new component to appear in the index.html page. The file set is from the basic quick start files from GitHub. I created a new component as such:

import { Component } from '@angular/core'; @Component({ selector: 'app-user-item', template: `<h1>It works!</h1>`, }) export class UserItemComponent { }

I have declared the selector tags in HTML as such:

<!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <base href="/"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">  <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/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('main.js').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> <app-user-item>loading another component</app-user-item> </body> </html>

I even tried adding the import to the top of app.module.ts and component name to the declarations array in app.module.ts. But still nothing. I checked my file structure and there is a js version of user-item.component.ts. But I cannot see changes.

Any help would be appreciated.

Cheers

最满意答案

用户item.component.ts：

import { Component } from '@angular/core'; @Component ({ selector: 'app-user-item', template: `<p>child item</p>` )} export class UserItemComponent { constructor(){ } }

user.component.ts：

import { Component } from '@angular/core'; @Component({ selector: 'app-user', template: ` <h2> My User Item </h2> <app-user-item></app-user-item>` }) export class UserComponent { constructor() {} }

user.module.ts：

import { NgModule } from '@angular/core'; import { UserComponent } from './user-component'; import { UserItemComponent } from './user-item-component'; @NgModule({ declarations: [ UserComponent, UserItemComponent ] }) export class UserModule {}

我真的很鼓励你使用angular-cli（ https://github.com/angular/angular-cli ）。并在角度页面上做教程。但是，对于您的用例，上面的代码应该足够并且有效。通常，您将子组件声明为与父组件相同的模块。该模块由app.module（根模块）导入

查看Angular的主要细节组件教程https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

user-item.component.ts:

import { Component } from '@angular/core'; @Component ({ selector: 'app-user-item', template: `<p>child item</p>` )} export class UserItemComponent { constructor(){ } }

user.component.ts:

import { Component } from '@angular/core'; @Component({ selector: 'app-user', template: ` <h2> My User Item </h2> <app-user-item></app-user-item>` }) export class UserComponent { constructor() {} }

user.module.ts:

import { NgModule } from '@angular/core'; import { UserComponent } from './user-component'; import { UserItemComponent } from './user-item-component'; @NgModule({ declarations: [ UserComponent, UserItemComponent ] }) export class UserModule {}

I really encourage you to use angular-cli (https://github.com/angular/angular-cli). And to do the tutorials on angular page. However, For your use case the code above should be sufficient and work. Usually you declare your subcomponent in the same module as the parentcomponent. This module is imported by the app.module (root module)

Look at the Master-Detail Component Tutorials of Angular https://angular.io/docs/ts/latest/tutorial/toh-pt2.html

更多推荐