【angular19】入门基础教程(二):组件的创建与使用

现代化前端，基本都是工程化的项目。而工程化的项目，组织方式又是组件化的方式。那么在angular中，如何创建一个组件并相互引用来编写需求业务呢？

实现效果

• 页面效果
  
• 在src目录下面创建如下的组件UserProfile，包含对应的ts,css和html文件，进行独立管理
  
• 组件内容

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

@Component({
  selector: 'UserProfile',
  templateUrl: './index.html',
  styleUrls: ['./index.css'],
})
export class UserProfile {
  title = '用户信息展示组件';
  userInfo = {
    name: '张三',
    age: 20,
    sex: '男',
    address: {
      city: '北京',
      street: '朝阳区',
    },
  };
  money = signal(100);
  handleChangeAge = () => {
    this.money.update((v) => v + 100);
  };
}

从@angular/core包中引入组件装饰器api，@Component就是我们来组织组件的js逻辑，css样式及页面模版html内容的。

**注意:** selector里面的名字就是组件的名称，也是我们在其他组件中导入该组件后，在html里面使用的时候的写法，，必须保持一样，可以是大驼峰，或者是-链接的命名形式。看个人喜好吧，官网两种方式都用到了。

• 在app组件中引入

import { Component } from '@angular/core';
// import { RouterOutlet } from '@angular/router';
import { UserProfile } from '../components/UserProfile';

@Component({
  selector: 'app-root',
  imports: [UserProfile],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'Hello angular!';
}

• 在页面模版中使用

<main class="main">
  <div class="content">
      <UserProfile />
  div>
main>

这样，我们就能在浏览器中看到这个组件的内容了。