会vue就会angular 6 - 条件与循环

有不清楚的地方可以加QQ群: 142681686. 不会24小时全天问答(毕竟还有工作), 但是当你遇到问题没地方找到答案的时候,来这里提问一下,死马当活马医万一我看到了刚好也知道答案呢? 也不浪费你啥是不是!!

前言

这一章节咱们来把angular中的指令拿出来和vue做对比,帮助大家掌握angular指令的使用

正文

条件渲染: ngIf

在angular通过*ngIf指令控制一个元素显示与否,如:

<p *ngIf="seen">现在你看到我了</p>

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
  public seen = true;
}

angular中如何通过else显示另外一个模版呢?

<p *ngIf="seen; else elseBlock">现在为真</p>
<ng-template #elseBlock><p>现在为假</p></ng-template>

这里的ng-template标签和vue中的template标签一样, 用于定义模板,在渲染的过程中并不会生成什么东西.

在angular中怎么实现类似于VUE中的多选择呢?

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

我建议你现在使用,如下结构实现:

<div *ngIf="type === 'A'">
  A
</div>
<div *ngIf="type === 'B'">
  B
</div>
<div *ngIf="type === 'C'">
  C
</div>
<div *ngIf="type !== 'A' && type !== 'B' && type !== 'C'">
  Not A/B/C
</div>

看起来好像不是那么优雅是不是? 但是这样确实满足了咱们的需求不是吗? 以后咱们还会介绍其他的通过编程的方式来控制元素的显示, 但是对于咱们刚入门的来说, 现在的是最好理解的方式.

经过之前的修改后咱们的welcome组件现在长成这个样子:

welcome.html

<h2 (click)="clickHandler($event)">你好, 欢迎来到{{ name }}!</h2>
<div *ngIf="active === 1">
  A
</div>
<div *ngIf="active === 2">
  B
</div>
<div *ngIf="active === 3">
  C
</div>
<div *ngIf="active !== 1 && active !== 2 && active !== 3">
  Not A/B/C
</div>

welcome.ts

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
  public name = 'Angular';
  private active = 1;

  clickHandler() {
    this.active++;
  }
}

循环渲染: ngFor

在angular中循环渲染和vue是十分相似的,vue中是这样的:

<div id="app-4">
  <ol>
    <li v-for="(todo, index) in todos">
      {{ todo.text }} {{ index }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

那么angular中是怎么样的呢?

welcome.html

<h2 (click)="clickHandler($event)">你好, 欢迎来到{{ name }}!</h2>
<div *ngIf="active === 1">
  A
</div>
<div *ngIf="active === 2">
  B
</div>
<div *ngIf="active === 3">
  C
</div>
<div *ngIf="active !== 1 && active !== 2 && active !== 3">
  Not A/B/C
</div>
<ol>
  <li *ngFor="let todo of todos; let i = index">
    {{ todo.text }} {{ i }}
  </li>
</ol>

welcome.ts

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

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.html',
  styleUrls: ['./welcome.css'],
})
export class WelcomeComponent {
  public name = 'Angular';
  private active = 1;
  public todos = [
    { text: '学习 JavaScript' },
    { text: '学习 Vue' },
    { text: '整个牛项目' }
  ];

  clickHandler() {
    this.active++;
  }
}

是不是基本上一样呢,对的, 其实你会VUE就会angular!!

最后

看了这些后是不是对学会angular的信心更足了呢? 对的, 其实angular没有网上说的这样难, 那样难; 难的不是angular,而是你决定学习angular的心.