Angular组件数据绑定

export class InterpolationComponent {
  // 基本类型
  title = 'Angular数据绑定';
  count = 42;
  isActive = true;
  price = 99.99;

  // 对象
  user = {
    name: '张三',
    age: 28,
    email: 'zhangsan@example.com'
  };

  // 数组
  skills = ['TypeScript', 'Angular', 'RxJS'];

  // 方法
  getGreeting(): string {
    return `你好，${this.user.name}！`;
  }

  // 计算属性
  get discountPrice(): number {
    return this.price * 0.8;
  }

  // 当前时间
  currentDate = new Date();
}

<h1>{{ title }}</h1>

<!-- 显示基本类型 -->
<p>计数: {{ count }}</p>
<p>状态: {{ isActive ? '活跃' : '不活跃' }}</p>
<p>原价: {{ price }} 元</p>
<p>折后价: {{ discountPrice }} 元</p>

<!-- 显示对象属性 -->
<p>姓名: {{ user.name }}</p>
<p>年龄: {{ user.age }}</p>
<p>{{ getGreeting() }}</p>

<!-- 使用管道格式化 -->
<p>当前时间: {{ currentDate | date:'yyyy-MM-dd HH:mm:ss' }}</p>

<!-- 数组长度 -->
<p>技能数量: {{ skills.length }}</p>

<!-- 复杂表达式（应避免） -->
<p>总价: {{ count * price }} 元</p>

<!-- 安全导航操作符 -->
<p>用户城市: {{ user?.address?.city || '未设置' }}</p>

<!-- 绑定到标准HTML属性 -->
<img [src]="imageUrl"
     [alt]="imageAlt"
     [width]="imageWidth">

<!-- 绑定到class属性 -->
<div [class.active]="isActive"
     [class.disabled]="isDisabled">
  内容区域
</div>

<!-- 绑定多个class -->
<div [class]="getClassList()"></div>

<!-- 绑定到style属性 -->
<button [style.color]="isValid ? 'green' : 'red'"
        [style.font-size.px]="fontSize">
  提交
</button>

<!-- 绑定多个样式 -->
<div [style]="getStyles()"></div>

<!-- 绑定到disabled属性 -->
<button [disabled]="isLoading">
  {{ isLoading ? '处理中...' : '提交' }}
</button>

<!-- 绑定到自定义数据属性 -->
<div [attr.data-user-id]="userId"></div>

// 父组件
@Component({
  template: `
    <app-user-card
      [user]="currentUser"
      [showAvatar]="true"
      [maxWidth]="300"
      [theme]="'dark'">
    </app-user-card>
  `
})
export class ParentComponent {
  currentUser = {
    name: '李四',
    role: '管理员'
  };
}

// 子组件
@Component({...})
export class UserCardComponent {
  @Input() user: any;
  @Input() showAvatar: boolean = false;
  @Input() maxWidth?: number;
  @Input() theme: 'light' | 'dark' = 'light';

  // 监听输入变化
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['user']) {
      console.log('用户数据已更新', changes['user'].currentValue);
    }
  }
}

<!-- 点击事件 -->
<button (click)="onButtonClick($event)">
  点击我
</button>

<!-- 输入事件 -->
<input (input)="onInputChange($event.target.value)"
       placeholder="输入内容">

<!-- 键盘事件 -->
<input (keydown)="onKeyDown($event)"
       (keyup)="onKeyUp($event)"
       (keyup.enter)="onEnter()"
       placeholder="按Enter键提交">

<!-- 鼠标事件 -->
<div (mouseenter)="onMouseEnter()"
     (mouseleave)="onMouseLeave()"
     (mousemove)="onMouseMove($event)">
  鼠标悬停区域
</div>

<!-- 表单事件 -->
<form (submit)="onFormSubmit($event)"
      (reset)="onFormReset()">
  <button type="submit">提交</button>
</form>

<!-- 聚焦/失焦事件 -->
<input (focus)="onFocus()"
       (blur)="onBlur()">

<!-- 滚动事件 -->
<div (scroll)="onScroll($event)"
     style="height: 200px; overflow: auto;">
  <p>可滚动内容...</p>
</div>

export class EventBindingComponent {
  clickCount = 0;
  inputValue = '';
  mousePosition = { x: 0, y: 0 };
  keyLog: string[] = [];

  // 处理点击事件
  onButtonClick(event: MouseEvent): void {
    this.clickCount++;
    console.log('按钮被点击', event);
    event.stopPropagation(); // 阻止事件冒泡
  }

  // 处理输入变化
  onInputChange(value: string): void {
    this.inputValue = value;
    console.log('输入内容:', value);
  }

  // 处理键盘事件
  onKeyDown(event: KeyboardEvent): void {
    console.log('按键按下:', event.key);
    this.keyLog.push(`按下: ${event.key}`);
  }

  // 处理鼠标移动
  onMouseMove(event: MouseEvent): void {
    this.mousePosition = {
      x: event.clientX,
      y: event.clientY
    };
  }

  // 带参数的事件处理
  onItemClick(itemId: number): void {
    console.log('项目被点击:', itemId);
  }

  // 防止默认行为
  onLinkClick(event: Event): void {
    event.preventDefault();
    console.log('链接点击被阻止');
  }

  // 使用 $event 对象
  onCustomEvent(event: CustomEvent): void {
    console.log('自定义事件:', event.detail);
  }
}

// 1. 导入FormsModule
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule],
  // ...
})

// 2. 组件中使用双向绑定
export class TwoWayBindingComponent {
  // 表单数据
  user = {
    name: '',
    email: '',
    age: 25,
    gender: 'male',
    interests: [],
    subscribe: true,
    bio: ''
  };

  // 选项数据
  genderOptions = [
    { value: 'male', label: '男' },
    { value: 'female', label: '女' }
  ];

  interestOptions = [
    { value: 'coding', label: '编程' },
    { value: 'music', label: '音乐' },
    { value: 'sports', label: '运动' }
  ];

  // 数据变化时触发
  onDataChange(): void {
    console.log('数据已更新:', this.user);
  }
}

<!-- 文本输入框 -->
<input [(ngModel)]="user.name"
       placeholder="请输入姓名">

<!-- 邮箱输入框 -->
<input type="email"
       [(ngModel)]="user.email"
       placeholder="请输入邮箱">

<!-- 数字输入框 -->
<input type="number"
       [(ngModel)]="user.age"
       min="0" max="100">

<!-- 下拉选择框 -->
<select [(ngModel)]="user.gender">
  <option *ngFor="let option of genderOptions"
          [value]="option.value">
    {{ option.label }}
  </option>
</select>

<!-- 多选框组 -->
<div *ngFor="let option of interestOptions">
  <input type="checkbox"
         [value]="option.value"
         [checked]="user.interests.includes(option.value)"
         (change)="toggleInterest(option.value)">
  {{ option.label }}
</div>

<!-- 单选框 -->
<input type="radio"
       [(ngModel)]="user.gender"
       value="male"> 男
<input type="radio"
       [(ngModel)]="user.gender"
       value="female"> 女

<!-- 复选框 -->
<input type="checkbox"
       [(ngModel)]="user.subscribe"> 订阅通知

<!-- 文本域 -->
<textarea [(ngModel)]="user.bio"
          rows="4"></textarea>