前言
这篇笔记对应 Angular 官方入门教程 https://angular.dev/tutorials/learn-angular/ 1~9 节内容，包含核心概念 + 可运行代码 + 常见错误 + 组件化思想，零基础也能看懂。
1. Angular 组件基础（核心骨架）
Angular 所有功能都基于组件，一个组件 = 配置（@Component） + 逻辑（class）。
1.1 最基础组件代码（可直接运行）
运行
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
selector: 'app-root', // 组件标签名
standalone: true, // 独立组件（必须写）
template: `<h1>Hello Angular</h1>`, // 页面结构
styles: [`h1 { color: blue; }`] // 组件样式
})
export class App {
title = 'Angular 入门';
}
bootstrapApplication(App);
1.2 组件三要素
selector：使用时的 HTML 标签<app-root>template：页面展示结构class：存储数据 + 写业务逻辑standalone: true：最新独立组件写法
2. 模板三大核心语法
2.1 插值表达式 {{}}（显示数据）
作用：把组件里的变量显示到页面上
运行
@Component({
selector: 'app-root',
standalone: true,
template: `
<p>名字：{{ name }}</p>
<p>计算：{{ 10 + 20 }}</p>
`
})
export class App {
name = '张三';
}
2.2 事件绑定 ( )（页面交互）
作用：点击、鼠标滑过等触发组件方法
运行
@Component({
selector: 'app-root',
standalone: true,
template: `
<button (click)="showMsg()">点击我</button>
<p>{{ message }}</p>
`
})
export class App {
message = '';
showMsg() {
this.message = '你点击了按钮';
}
}
2.3 属性绑定 [ ]（动态设置属性）
作用：动态控制 HTML 属性 / 传递数据给子组件
正确 ✅
预览
<div [contentEditable]="isEditable">我可以编辑</div>
错误 ❌（千万不要这样写）
预览
<div [contentEditable]="{{ isEditable }}"></div>
完整代码
运行
@Component({
selector: 'app-root',
standalone: true,
template: `<div [contentEditable]="isEditable">点我编辑</div>`
})
export class App {
isEditable = true;
}
3. 组件内部逻辑（this 的使用）
this = 当前组件自己，用来访问自己的变量和方法。
3.1 点击切换文字（经典案例）
运行
@Component({
selector: 'app-root',
standalone: true,
template: `
<button (click)="changeName()">切换名字</button>
<p>{{ userName }}</p>
`
})
export class App {
userName = 'Simran';
changeName() {
this.userName = this.userName === 'Simran' ? 'Jack' : 'Simran';
}
}
3.2 鼠标划过 偶数次隐藏（教程案例）
运行
@Component({
selector: 'app-root',
standalone: true,
template: `
<section (mouseover)="toggle()">划过我</section>
<p>{{ message }}</p>
`
})
export class App {
message = '';
count = 0;
toggle() {
this.count++;
if (this.count % 2 === 0) {
this.message = ''; // 偶数隐藏
} else {
this.message = '显示秘密';
}
}
}
4. 父子组件通信（重点）
4.1 父 → 子 传值（input）
子组件 user.ts
运行
import { Component, input } from '@angular/core';
@Component({
selector: 'app-user',
standalone: true,
template: `<p>名字：{{ name() }}</p>`
})
export class User {
readonly name = input<string>();
}
父组件 app.ts
运行
import { Component } from '@angular/core';
import { User } from './user';
@Component({
selector: 'app-root',
standalone: true,
imports: [User],
template: `<app-user [name]="userName" />`
})
export class App {
userName = 'Simran';
}
4.2 子 → 父 传值（output 事件）
子组件 child.ts
运行
import { Component, output } from '@angular/core';
@Component({
selector: 'app-child',
standalone: true,
template: `<button (click)="send()">发送给父组件</button>`
})
export class Child {
readonly addItem = output<string>();
send() {
this.addItem.emit('🐢 小龟');
}
}
父组件 app.ts
运行
import { Component } from '@angular/core';
import { Child } from './child';
@Component({
selector: 'app-root',
standalone: true,
imports: [Child],
template: `
<app-child (addItem)="add($event)" />
<p>列表数量：{{ items.length }}</p>
`
})
export class App {
items: string[] = [];
add(item: string) {
this.items.push(item);
}
}
5. 必须记住的语法区别
表格
6. 常见错误（必看）
❌ 错误 1：[] 里写 {{}}
预览
<app-user [name]="{{ userName }}" />
✅ 正确
预览
<app-user [name]="userName" />
❌ 错误 2：忘记引入子组件
运行
// 没有写 imports: [Child]
7. 为什么要拆分成父子组件？
代码复用：一个组件多处使用
结构清晰：不会所有代码堆在一个文件
逻辑隔离：改一个地方不会影响全部
团队协作：多人开发不冲突
8. 1-9 节全部知识点总结
组件 = @Component + class
模板语法：
{{ }}( )[ ]this 代表当前组件
父传子：
input()+[ ]子传父：
output()+( )组件化让项目更易维护