[成都|内门弟子]CSS-何俊|2021年01月13日的日报-技能树.IT修真院

发表于： 2021-01-13 23:59:01

1 932

今天完成的事情：

1.安装配置angular

配置关键词：

指定文件夹位置

ng serve --open

启动指令，用于打开angular网页

ng-g component xxx/xxx

在指定文件夹下建立新文件夹

app.component.html文件根组件

app.module.ts文件根模块

styles.css文件公共样式

<app-form></app-form> 引入创建的文件夹form

{{xx}} 绑定后台数据

2.学习angular代码运用

新建文件夹news

代码实践：

news.component.html：

<h1>引入图片</h1>
<img src="assets/images/技能树首页_13.jpg" alt="">
<hr>

<h1>循环数据 显示数据的索引</h1>
<ul>
    <li *ngFor="let item of list;let key=index;">
        {{key}}---{{item.title}}
    </li>
</ul>

<h1>条件判断语句 *ngIf</h1>
<div *ngIf="flag">
    <img src="assets/images/技能树首页_14.jpg" alt="">
</div>
<div *ngIf="!flag">
    <img src="assets/images/技能树首页_13.jpg" alt="">
</div>
<ul>
    <li *ngFor="let item of list;let key=index;">
        <span *ngIf="key==1" class="red">{{key}}---{{item.title}}</span>
        <span *ngIf="key!=1">{{key}}---{{item.title}}</span>
    </li>
</ul>

<h1>条件判断语句 *ngSwitch</h1>
<span [ngSwitch]="orderStatus">
    <p *ngSwitchCase="1">
        表示已经支付
    </p>
    <p *ngSwitchCase="2">
        支付并且确认订单
    </p>
    <p *ngSwitchCase="3">
        表示已经发货
    </p>
    <p *ngSwitchCase="4">
        表示已经收货
    </p>
    <p *ngSwitchDefault>
        无效订单
    </p>
</span>

<h1>属性[ngClass].[ngStyle]</h1>
<div class="red">
    ngClass演示(尽量不要用dom来改变class)
</div>
<div [ngClass]="{'blue': true,'red': false}">
    ngClass演示
</div>
<div [ngClass]="{'orange': flag,'red': !flag}">
    ngClass演示
</div>

<strong>循环数组,让数组的第一个元素的样式为red</strong>
<ul>
    <li *ngFor="let item of list;let key=index;" [ngClass]="{'red': key==0,'orange': key==1,'blue': key==2}">
        {{key}}---{{item.title}}
    </li>
</ul>
<hr>
<p style="color: red;">我是一个p标签</p>
<p [ngStyle]="{'color': 'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签</p>
<br>

<h1>管道</h1>
{{today |date:'yyyy--MM--dd HH:mm ss'}}

<h1>事件</h1>
<strong>{{title}}</strong>
<br>
<button (click)="run()">执行事件</button>
<br>
<button (click)="getData()">执行方法获取数据</button>
<br>
<button (click)="setData()">执行方法改变属性里面的数据</button>
<br>
<button (click)="runEvent($event)">执行方法获取数据对象</button>

<h1>表达事件 事件对象</h1>
<!-- <input type="text" (keydown)="keyDown()"> -->
keyDown:
<input type="text" (keydown)="keyDown($event)" />
keyUp:
<input type="text" (keyup)="keyUp($event)" /

<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]="keywords" />
{{keywords}}
<br>
<button (click)="changeKeywords()">改变keywords的值</button>
<br>
<button (click)="getKeywords()">获取Keywords的值</button>

news.component.ts

public title: string = '我是一个title';

  public list: any[] = [
    {
      "title": '我是新闻1'
    },
    {
      "title": '我是新闻2'
    },
    {
      "title": '我是新闻3'
    }
  ];

  public flag: boolean = true;

  public orderStatus: number = 1;

  public attr: string = 'orange';

  public today: any = new Date();

  public keywords:string='这是默认值';


  constructor() {

    console.log(this.today);

  }

  ngOnInit(): void {
  }

  run() {
    alert("执行方法");
  }

  getData() {
    alert(this.title);
  }

  setData() {
    this.title = '我是一个改变后的title';
  }

  runEvent(event) {
    var dom:any = event.target
    dom.style.color = "red";
  }

  keyDown(e) {
    if (e.keyCode == 13) {
      console.log('按了一下回车');
    } else {
      // e.target 获取对象
      console.log(e.target.value);
    }
  }

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

  changeKeywords() {
    this.keywords = '我是改变后的值';
  }

  getKeywords() {
    console.log(this.keywords);
  }