Angular 7 自学总结(1)

个人理解Angular

它是一个模块化、组件化的开发理念，引入并声明后就可以在其他地方应用，在通过路由控制显示出来
github源码地址：https://github.com/wangduxiu/Angular7-Demo.git

创建一个项目

• 首先安装环境node.js，安装npm。
• 安装cli。
• 在cli中输入命令： cd到想要存储项目的文件夹，ng new 项目名
• 启动服务：在当前项目目录下ng serve --open可以看到页面显示angular则项
• 会自动创建一个可以运行的项目骨架。
• 启动服务：在当前项目目录下 ng serve --open可以看到页面显示angular则项
  目运行成功。

项目目录结构分析

主要需要知道的文件:

• node-modules：安装的第三方模块都放在这里。
• src : 编写项目都在这个文件夹中。
• app :组件以及app.modules.ts 定义根模块。
• index.html : 主页面入口。
• style.css : 全局样式。
• package.json : npm配置文件。

创建组件

• cd到项目文件夹，ng g component components/news:创建一个components文件夹（组件）并在该文件夹下创建一个news组件。
  注： 如果手动创建组件，想要使用这个组件必须在app.modules.ts中引入和声明，如果是命令自动创建则自动声明和引入。
• 如何在其他页面复用组件？
  在新创建的组件中的news.component.ts文件中，有一个selector属性就是名字，如果需要调用只需要在其他页面中写入 即可，这样页面代码量少、代码复用率高。

 @Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})

定义数据

定义数据的几种方式：
1.定义基本数据

title ="我是新闻组件";
public title ="我是新闻组件";
public title:string ="我是新闻组件"; //最标准的定义方式
public message:any;//定义空数据

2.定义对象

  public userinfo:object={
    username:"zhangsan",
    age:"20"
  };

3.定义数组的几种方式

//普通数组
arr=[a,b,c];
public arr:arr[] =['111','222','333'];
public list:Array<number>=[123,321,456,654];//如果<>里面是number则数组必须是number
//对象数组
public userList:Array<object>=[
    {
      username:"zhangsan",
      age:18
    },
    {
      username:"lisi",
      age:19
    },
    {
      username:"wangwu",
      age:20
    }
];
//复杂数组
public cars:Array<any>=[
    {
      cate:"宝马",
      list:[{
        title:"X1",
        price:1000000
      },
      {
        title:"X2",
        price:2000000
      },
      {
        title:"X3",
        price:3000000
      }]
    },    {
      cate:"奔驰",
      list:[{
        title:"X1",
        price:1000000
      },
      {
        title:"X2",
        price:2000000
      },
      {
        title:"X3",
        price:3000000
      }]
    },    {
      cate:"劳斯莱斯幻影",
      list:[{
        title:"X1",
        price:1000000
      },
      {
        title:"X2",
        price:2000000
      },
      {
        title:"X3",
        price:3000000
      }]
  }
];

数据绑定 （1）

<!-- 绑定数据 -->
<h2>{{title}}</h2>
<h3>{{msg}}</h3>
<h4>{{username}}</h4>
<h5>{{student}}</h5>

<hr />
<!-- 绑定对象数据 -->
<h5>{{userinfo.username}}</h5>
<h5>{{userinfo.age}}</h5>
<h5>{{message}}</h5>

<hr />
<!-- 动态绑定标签属性 -->
<div [title]="student">
    张三
</div>
<!-- 通过属性绑定的方法解析标签 绑定数据 -->
<span [innerHtml]="content" class="red"></span>

<!-- 允许做简单运算 -->
1+2={{1+2}}

<!-- 循环遍历数组绑定到页面中 -->
<ul class="ul">
    <li *ngFor="let item of arr">
        {{item}}
    </li>
</ul>

<ol>
    <li *ngFor="let item of list">
        {{item}}
    </li>
</ol>

<!-- 遍历对象数组绑定页面 -->
<ul>
    <li *ngFor="let item of userList">
        {{item.username}}
        {{item.age}}
    </li>
</ul>

<!-- 遍历复杂数组绑定页面 -->
<ul>
    <li *ngFor="let item of cars">
        <h2>{{item.cate}}</h2>
        <ol *ngFor="let car of item.list">
            <li>
                {{car.title}}
                {{car.price}}
            </li>
        </ol>
    </li>
</ul>

数据绑定 （2）

1.引入图片
html:

<img src="assets/images/1.jpg" alt="美女" width="240px" height="180px">

<img [src]='imgSrc' alt="美女" width="240px" height="180px">

ts:

public imgSrc:any="https://www.baidu.com/img/bd_logo1.png";

2.循环数据显示数据的索引（key）
html:

<ul>
  <li *ngFor="let item of list; let key=index;">
    {{key}}-----{{item.title}}
  </li>
</ul>

ts:

  public list:Array<any>=[
    {
      title:"新闻1"
    },{
      title:"新闻2"
    },{
      title:"新闻3"
    }
  ];

3.条件判断语句 *ngIf
html:

<div *ngIf="flag">
  <img src="assets/images/1.jpg" alt="美女" width="240px" height="180px">;
</div>
<div *ngIf="!flag">
  <img [src]='imgSrc' alt="美女" width="240px" height="180px">
</div>

<ul>
  <li *ngFor="let item of list; let key=index;">
    <span *ngIf="key==0" class="red">{{key}}-----{{item.title}}</span> 
    <span *ngIf="key==1" class="pink">{{key}}-----{{item.title}}</span> 
    <span *ngIf="key==2" class="blue">{{key}}-----{{item.title}}</span> 
  </li>
</ul>

ts:

  public list:Array<any>=[
    {
      title:"新闻1"
    },{
      title:"新闻2"
    },{
      title:"新闻3"
    }
  ];

4.条件判断语句 ngSwitch
html:

<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
  已经支付
</p>
<p *ngSwitchCase="2">
  已经支付并确认订单
</p>
<p *ngSwitchCase="3">
  已经发货
</p>
<p *ngSwitchCase="4">
  已经收货
</p>
<p *ngSwitchDefault>
  无效订单
</p>
</span>

ts:

public orderStatus:number=5;//1表示已经支付 2表示已经支付并确认订单 3表示已经发货 4表示收货 5表示无效

5.属性ngClass ngStyle
html:

<div [ngClass]="{'red': true,'blue': true}">
  111111111111111111111
</div>

<div [ngClass]="{'red': flag,'blue': !flag}">
  222222222222222222222
</div>

css:

.red{
    color: red;
}
.pink{
    color: pink;
}
.blue{
    color: blue;
}

ts:

public flag:boolean=true;

6.循环数组让数据变成红粉蓝
html:

<ul>
  <li *ngFor="let item of list; let key=index;" [ngClass]="{'red': key==0,'pink':key==1,'blue':key==2}">
    {{key}}-----{{item.title}}
  </li>
</ul>

html:

<p style="color:red">我是一个P标签</p>
<p [ngStyle]="{'color': 'pink'}">我是一个P标签</p>
<p [ngStyle]="{'color': attr}">我是一个P标签</p>

7.管道
html:

<div>
  日期：{{today | date:'yyyy-MM-dd HH:mm ss'}}
</div>

ts:

 public today:any= new Date();

8.事件
html:

<strong>{{title}}</strong>
<br>
<button (click)="run()">执行事件</button>
<br>
<button (click)="getData()">执行事件,获取数据</button>
<br>
<button (click)="upDateData()">执行事件,改变数据</button>
<hr>

ts:

public title:string="我是一个标题";
run(e){
    alert("我是一个button事件");
  }
getData){
   alert(this.title);
}
upDateData(){
   this.title="我是改变后的数据";
}

9.表单事件 事件对象
html:

<input type="text" (keydown)="keydown($event)">
<br>
<input type="text" (keyup)="keyUp($event)">

ts:

keydown(e){
    if(e.keyCode==13){
      console.log("按了一下回车");
    }else{
      console.log(e.target.value);
    }
}
keyUp(e){
    if(e.keyCode==13){
      console.log("按了一下回车");
      console.log(e.target.value);
    }
 }

10.双向数据绑定 MVVM
html:

<input type="text" [(ngModel)]="keywords"> 
{{keywords}}
<br>
<button (click)="changeKeywords()">改变Keywords的值</button>
<br>
<button (click)="getKeywords()">获取Keywords的值</button>

ts:

public keywords:any="我是keywords";
changeKeywords(){
   this.keywords="我是改变后的值";
}
 getKeywords(){
   console.log(this.keywords);
}