Angular之组件（五）

创建组件

概述

组件是Angular应用的主要构造块。每个组件包括如下部分：

• 一个HTML模板，用于声明页面要渲染的内容。
• 一个用于定义行为的Typescript类。
• 一个CSS选择器，用于定义组件在模板中的使用方式。
• （可选）要应用在模板上的CSS样式。

创建组件命令

首先我们需要进行我的项目的根目录中。语法如下

ng generate component <component-name>

• <component-name>是你要创建的组件名。

比如：我要创建一个组件名为demo1的组件。命令如下：

ng generate component demo1

如下图所示：

注意：会把组件名创建在app文件夹中。创建创建了如下文件：

• src/app/demo1/demo1.component.html模板文件。
• src/app/demo1/demo1.component.spec.ts单元测试文件。
• src/app/demo1/demo1.component.ts组件文件。
• src/app/demo1/demo1.component.css样式文件。

组件文件说明并加载

查看app/demo1/demo1.component.ts文件内容如下：

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

其中：

@Component({
  selector: 'app-demo1',  // 指定组件的css选择器
  templateUrl: './demo1.component.html', // 定义一个组件的模板
  styleUrls: ['./demo1.component.css']
})

如果在模板中出现：<app-demo1></app-demo1>或者<app-demo1>时，这个选择器就会让Angular实例化该组件。比如直接修改src/app/app.component.html文件中的内容为如下：

<app-demo1></app-demo1>

然后重新运行ng serve查看效果。可以看出这次加载出来的数据是app/demo1/demo1.component.html模板中的内容了。也就是加载了demo1这个组件中的内容了。

组件样式

我们重新创建一个组件。命令如：ng generate component demo2。

修改组件模板文件

编辑src/app/demo2/demo2.component.html，内容如下：

<style>
    .demo2{
        background: pink;
    }
</style>
<div class="demo2">
    <h2>我是demo2组件</h2>
</div>

加载组件

修改src/app/app.component.html，内容如下：

<app-demo2>

注意事项

• 在app.component.html中只能加载一个组件。如果写多个组件的话，只会加载第一个组件。比如：

<app-demo1></app-demo1>
<app-demo2></app-demo2>

上面的话只会加载<app-demo1>这个组件。如果想要加载两个组件的话需要在外部加一个窗口包在一起。如下：

<div>
    <app-demo1></app-demo1>
    <app-demo2></app-demo2>
</div>

样式

src/style.css全局样式：

.demo2{
    background: blue;
}

src/app/demo2/demo2.component.css组件样式：

.demo2{
    background: green;
}

样式优先级：内联样式 > 外部样式 > 组件样式 > 全局样式。

扩展

@import

在Angular中还支持使用@import导入样式。语法如下：

@import './demo.css';

组件变量赋值

组件文件

修改src/app/demo2/demo2.component.ts文件，内容如下：

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

@Component({
  selector: 'app-demo2',
  templateUrl: './demo2.component.html',
  styleUrls: ['./demo2.component.css']
})
export class Demo2Component implements OnInit {
  title = '我是demo2组件';
  id_str = "id_str";
  class_str = "btn";
  index = 0;
  // angular会自动处理一些恶意的代码
  html_str = '<span>html_str<script>alert("111");</script></span>';

  constructor() { }

  // 该函数不能删除，否则会报错
  ngOnInit(): void {
  }

  // 定义一个计算两个值的和的函数
  sum(a: number, b: number): number{
    return a + b;
  }

}

组件模板

修改src/app/demo2/demo2.component.ts文件，内容如下：

<div class="demo2">
    <!-- 插值 -->
    <h2>{{ title }}</h2>
    <p>计算：1+1={{1 + 1}}</p>
    <p>计算：3+4={{sum(3, 4)}}</p>
    <p class="{{ class_str }}">btn类名</p>

    <!-- 自定义属性插入 -->
    <p [attr.data-index]="index">索引属性</p>
    <!-- 绑定html自带的属性,可以这样操作 -->
    <p [class]='class_str'>类名</p>
    <p [id]="id_str">id</p>

    <!-- 插入html内容，不转义 -->
    <p>{{ html_str }}</p>

    <!-- 插入html内容，转义 -->
    <p [innerHtml]='html_str'></p>
</div>

效果图

组件样式和事件

组件文件

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

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

  class_str = "dmeo";
  class_obj = {
    class1: true,
    a123: false,
    b123: true,
  }
  is_show=true;
  class_arr = ['a21', 'add121'];

  style_str = "font-size: 20px;";
  style_obj = {
    fontSize: '20px',
    background: 'green',
  }
  pink = 'pink';

  sty_obj1 = {
    fontSize: '20px',
    background: 'pink',
  }

  event_style = {
    background: 'blue',
    color:'#fff',
  }

  constructor() { }

  ngOnInit(): void {
  }

  // 更新颜色
  changeColor(){
    this.sty_obj1 = {
      fontSize: '30px',
      background: 'blue',
    }
  }

  // 更改当前点击元素的颜色
  changeEvent(event: any){
    console.log(event);
    event.target.style.background = 'pink';
  }
}

组件模板

<div id="demo3">
    <!-- 定义变量的形式 -->
    <p class="a12" class="{{ class_str }}">2222</p>
    <p [class]="class_str">1111</p>
    <p [attr.class]="class_str">222</p>

    <!-- 字符串形式 -->
    <p class="'abc a11'">333</p>
    
    <!-- 对象形式 -->
    <p [class]="class_obj">class_obj</p>
    <p [class]="{demo: is_show}">class_obj11</p>

    <!-- 数组形式 -->
    <p [class]="['a123', 'de12', 'dd12']">class_array</p>
    <p [class]="class_arr">class_array22</p>

    <!-- style形式 -->
    <p [style]="style_str">style1的变量</p>
    <p [style]="style_obj">style2的对象</p>
    <p [style.background]='pink'>style3的变量使用</p>
    <p [style.width]='"100px"' [style.background]="'blue'" [style.color]='"#fff"'>style4的字符串使用</p>

    <!-- 点击事件更新颜色 -->
    <div>
        <button (click)="changeColor()">点击我更新</button>
        <p [style]="sty_obj1">我的样式会更新</p>
    </div>
    <button [style]="event_style" (click)="changeEvent($event)">更改当前按钮的颜色</button>

</div>

效果图

组件之条件渲染与循环渲染

条件渲染

组件文件

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

@Component({
  selector: 'app-demo4',
  templateUrl: './demo4.component.html',
  styleUrls: ['./demo4.component.css']
})
export class Demo4Component implements OnInit {
  age = 11;
  if_show = false;

  constructor() { }

  ngOnInit(): void {
  }

}

组件模板

<div>
    <!-- 条件渲染 -->
    <!-- ng-if 条件 -->
    <ng-container *ngIf="age > 10">
        <p>我是age大于10</p>
    </ng-container>
    
    <p *ngIf="age > 10">
        我也是age大于10
    </p>
    
    <!-- ng-if-else 条件-->
    <ng-container *ngIf="if_show; else elseTemplate">
        <p>我是if_show为true时的内容</p>
    </ng-container>
    <ng-template #elseTemplate>
        <p>我是if_show为false时的内容</p>
    </ng-template>

    <!-- 另一种 ng-if-then-else -->
    <ng-container *ngIf="!if_show; then thenTemplate11; else elseTemplate22"></ng-container>
    <ng-template #thenTemplate11>
        <p>我是thenTemplate11</p>
    </ng-template>
    <ng-template #elseTemplate22>
        <p>我是elseTemplate22</p>
    </ng-template>
    
    <!-- ng-hide 代表：是否隐藏，如果为真就隐藏，否则就显示。 相当于给元素加上display:none或者display:block; -->
    <div [hidden]="if_show">我是if_show为真就隐藏，否则就显示</div>
    
</div>

效果图

循环渲染

组件文件

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

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

  data_list = [
    'zhenzi0322',
    '一切皆往事',
    '一切皆往事经过这里'
  ];

  arr_obj = [
    {
      name: '一切皆往事',
      age: 19,
      sex: '男'
    },
    {
      name: '小妹',
      age: 18,
      sex: '女'
    }
  ]

  obj1 = {
    name: '一切皆往事',
    age: 19,
  }

  name = "一切皆往事";

  is_show = 111; // 0代表false,1代表true，也可以使用false或true。

  num = 2;

  constructor() { }

  ngOnInit(): void {
  }

}

组件模板

<div>
    <!-- 数组循环 -->
    <ul>
        <li *ngFor="let item of data_list">{{ item }}</li>
    </ul>

    <!-- 获取数组中的索引值 -->
    <ul>
        <li *ngFor="let item of data_list;let key=index;">索引值为：{{ key }}----{{ item }}</li>
    </ul>

    <!-- 复杂数组渲染 -->
    <ul>
        <li *ngFor="let item of arr_obj;let key=index;">索引值-{{ key }}--name: {{ item.name }}, age: {{ item.age }}, sex: {{ item.sex }}</li>
    </ul>

    <!-- 对象渲染 -->
    <p>{{ obj1.name }}</p>

    <!-- 变量渲染 -->
    <p>{{ name }}</p>

    <!-- ng-switch的使用 -->
    <span [ngSwitch]="is_show">
    <p *ngSwitchCase="true">
        我是内容一
    </p>
    <p *ngSwitchCase="false">
        我是内容二
    </p>
    <p *ngSwitchDefault>
        我是默认值内容
    </p>
    </span>

    <span [ngSwitch]="num">
    <p *ngSwitchCase="1">
        星期一
    </p>
    <p *ngSwitchCase="2">
        星期二
    </p>
    <p *ngSwitchCase="3">
        星期三
    </p>
    <p *ngSwitchCase="4">
        星期四
    </p>
    <p *ngSwitchCase="5">
        星期五
    </p>
    <p *ngSwitchDefault>
        未知
    </p>
    </span>
    
</div>

效果图