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

@Component({
  template: `
    <h1>{{ title }}</h1>
    <p>欢迎, {{ userName }}!</p>
    <p>今天是: {{ currentDate | date:'yyyy-MM-dd' }}</p>
    <p>计算面积: {{ width * height }}</p>
    <p>{{ getGreeting() }}</p>
  `
})
export class AppComponent {
  title = 'Angular模板教程';
  userName = '张三';
  currentDate = new Date();
  width = 10;
  height = 5;

  getGreeting(): string {
    return `你好，${this.userName}！`;
  }
}

// 1. 在app.module.ts中导入FormsModule
import { FormsModule } from '@angular/forms';

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

// 2. 在组件模板中使用
<input [(ngModel)]="userName"
       placeholder="请输入用户名">

<select [(ngModel)]="selectedFramework">
  <option value="Angular">Angular</option>
  <option value="React">React</option>
</select>

<textarea [(ngModel)]="description"></textarea>

// 3. 组件中的属性会自动更新
export class UserFormComponent {
  userName = '';
  selectedFramework = 'Angular';
  description = '';
}

// 1. 创建支持双向绑定的组件
@Component({
  selector: 'app-toggle',
  template: `
    <button (click)="toggle()"
            [class.active]="value">
      {{ value ? 'ON' : 'OFF' }}
    </button>
  `
})
export class ToggleComponent {
  @Input() value: boolean = false;
  @Output() valueChange = new EventEmitter<boolean>();

  toggle(): void {
    this.value = !this.value;
    this.valueChange.emit(this.value);
  }
}

// 2. 在父组件中使用
<app-toggle [(value)]="isActive"></app-toggle>

// 这相当于：
<app-toggle [value]="isActive"
            (valueChange)="isActive = $event">
</app-toggle>

<!-- 引用input元素 -->
<input #nameInput
       type="text"
       placeholder="输入姓名">

<button (click)="focusInput(nameInput)">
  聚焦输入框
</button>

<!-- 组件中访问 -->
export class RefComponent {
  focusInput(inputEl: HTMLInputElement): void {
    inputEl.focus();
    inputEl.select();
  }
}

<!-- 引用子组件 -->
<app-user-form #userForm></app-user-form>

<button (click)="submitForm(userForm)">
  提交表单
</button>

<!-- 在模板中直接调用组件方法 -->
<p>表单是否有效: {{ userForm.isValid }}</p>

<!-- 通过ViewChild在组件中访问 -->
export class ParentComponent {
  @ViewChild('userForm') userForm!: UserFormComponent;

  submitForm(): void {
    if (this.userForm.isValid) {
      this.userForm.submit();
    }
  }
}

// 组件代码
export class UserComponent {
  user: any = null; // 初始为null

  // 模板中访问
  // {{ user.name }}  // 会抛出错误
}

<!-- 安全访问嵌套属性 -->
<p>用户名: {{ user?.name }}</p>
<p>城市: {{ user?.address?.city }}</p>
<p>邮编: {{ user?.address?.zipCode }}</p>

<!-- 与管道结合使用 -->
<p>{{ user?.birthday | date:'yyyy-MM-dd' }}</p>

<!-- 在属性绑定中使用 -->
<img [src]="user?.avatarUrl"
     [alt]="user?.name">

<!-- 在事件绑定中使用 -->
<button (click)="user?.save()">
  保存
</button>