一 、组件
1. 组件的创建
1.1 自动创建
ng generate component <component-name>
一个以该组件命名的文件夹
一个组件文件 <component-name>.component.ts
一个模板文件 <component-name>.component.html
一个 CSS 文件, <component-name>.component.css
测试文件 <component-name>.component.spec.ts
1.2 手动创建
import {
Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.less']
})
export class HelloWorldComponent implements OnInit {
}
二 、基础
1. 数据绑定 {
{ }}
public title:string="123";
<h1>{
{
title}}</h1>
this.h="<h2>这是H2标签</h2>";
<div [innnerHTML]="h"></div>
2. 属性绑定 [ ]
<div [id]="id" [title]="title">属性绑定</div>
3. 数组循环 *ngFor
public List:string[] =['11','22','33'];
<ul>
<li *ngFor="let item fo List;let key =index">
{
{
key}}----{
{
item}}
</li>
</ul>
4. 条件循环 *ngIf
<li *ngFor="let item fo List;let key = index">
<span *ngIf="key===1" class="red">{
{
key}}----{
{
item}}</span>
<span *ngIf="key!==1">{
{
key}}----