Angular 6 入门学习二：第一个component

在angular目录下创建项目blueprj：

>ng new blueprj

Index.html->app.component.ts

2. 创建一个angular component： blue，

>ng g component blue

Angular 6 入门学习二：第一个component

blue.component.ts

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

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

constructor() { }

ngOnInit() {
}

}

a. selector：标识这个组件， angular在创建时会在前面加上app-.

b. BlueComponent: 代表这个组件，并提供组件方法

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

从@angular/core 引入组件

3.从app.component页面引入blue页面

Angular 6 入门学习二：第一个component

从colors.js里引入oColorList对象

export const oColorList = [
{
    oName:'blue',
    oType:'user',
   oStatus:'normal'
},
{
     oName:'red',
   oType:'user',
   oStatus:'block'
},
{
     oName:'yellow',
     oType:'user',
   oStatus:'normal'
}
];

在blue.component.html里用表格显示数据

<table class="table table-condensed">
    <thead>
   <tr>
       <th> </th>
         <th>color Name</th>
       <th>color Type</th>
       <th>Status</th>
    </tr>
   </thead>
   <tbody>
      <tr *ngFor="let color of oColorList; index as productId">
       <td>*</td>
         <td>{{ color.oName }}</td>
         <td>{{ color.oType }}</td>
         <td>{{ color.oStatus }}</td>
      </tr>

</tbody></table>

4. 运行项目，

>ng serve

Angular 6 入门学习二：第一个component

5. 查看页面，

浏览器数据http://localhost:4200/，首页显示数据