Angular 002 创建组件，组件的模板

Angular 002 创建组件，组件的模板

• 创建组件指令 ng g component 在Components目录下创建一个home组件的指令
  ng g component Components/home.
• 创建后系统会生成4个文件
  • home.component.html : html就是所谓的模板
  • home.component.scss : 样式文件，后缀.scss是因为我们创建项目选的scss
  • home.component.spec.ts 单元测试文件。
  • home.component.ts 业务逻辑文件，typescript就是一种封装的语言，编译之后后台会转化成js
    ![创建home组件
    来看看home组件的home.component.ts文件

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

@Component({
  selector: 'app-home',		// 选择器 - 比如在根模块的html中引入home组件 -<app-home></app-home>
  templateUrl: './home.component.html',  // html就是所谓的模板
  styleUrls: ['./home.component.scss']		// 样式文件
})
export class HomeComponent implements OnInit {

  constructor(public router:Router) { }	 // 构造方法（后加的代码注入了一个Router依赖，默认没有）

  ngOnInit(): void {								// 生命周期函数之一，紧随构造方法之后执行
  }


  routeToRouteTest() {							// 自定义函数，void都可以偷懒不写。

    this.router.navigate(['route-test', 'home-button-click']);
  }
}

···

最后希望大家一定要动手练习才能更好的理解。加深印象。Be happy.