Angular 基础

使用 tutorials,一边学一边记笔记。

组件

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

@Component({
  selector: 'app-root',
  template: `
    Hello
  `,
  styles: `
    :host {
      color: blue;
    }
  `,
  standalone: true,
})
export class AppComponent {}

组合组件

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

@Component({
  selector: 'app-user',
  template: `
    Username: {{ username }}
  `,
  standalone: true,
})
export class UserComponent {
  username = 'youngTech';
}

@Component({
  selector: 'app-root',
  template: `<app-user />`,     // 2. 引入后使用
  standalone: true,
  imports: [UserComponent],     // 1. 引入其它组件
})
export class AppComponent {}

控制流 @if

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

@Component({
  selector: 'app-root',
  template: `
    @if(isServerRunning) {
      <span>Yes, the server is running</span>
    }
    @else {
      <span>No, it was dead.</span>
    }
  `,
  standalone: true,
})
export class AppComponent {
  // add the boolean property here
  isServerRunning: boolean = true
}

控制流 @for

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

@Component({
  selector: 'app-root',
  template: `
    @for(user of users; track user.id) {
      <p>{{ user.name }}</p>
    }
  `,
  standalone: true,
})
export class AppComponent {
  users: any[] = [
    {id: 0, name: 'Sarah'},
    {id: 1, name: 'Amy'},
    {id: 2, name: 'Rachel'},
    {id: 3, name: 'Jessica'},
    {id: 4, name: 'Poornima'}
  ]
}

属性绑定

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

@Component({
  selector: 'app-root',
  styleUrls: ['app.component.css'],
  template: `
    <div [contentEditable]="isEditable"></div>
  `,    // 属性绑定使用 []
  standalone: true,
})
export class AppComponent {
  isEditable: boolean = true
}

事件处理

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

@Component({
  selector: 'app-root',
  template: `
    <section (mouseover)="onMouseOver()">
      There's a secret message for you, hover to reveal 👀
      {{ message }}
    </section>
  `,    // 使用 () 来绑定事件
  standalone: true,
})
export class AppComponent {
  message = '';

  onMouseOver() {
    this.message = 'Way to go 🚀'
  }
}

组件间通信 父向子传值 @Input

user.component.ts

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

@Component({
  selector: 'app-user',
  template: `
    <p>The user's name is {{ name }}</p>
  `,    // 2. 在模板中调用 name 属性
  standalone: true,
})
export class UserComponent {
    // 1. 定义一个 @Input 属性，相当于*其它*框架中的 props
  @Input() name:string = ''
}

app.component.ts

import {Component} from '@angular/core';
import {UserComponent} from './user.component';

@Component({
  selector: 'app-root',
  template: `
    <app-user name="Simran"/>
  `,    // 3. 在父组件中传入 name
  standalone: true,
  imports: [UserComponent],
})
export class AppComponent {}

组件间通信 子向父通知 @Output

app.component.ts

import {Component} from '@angular/core';
import {ChildComponent} from './child.component';

@Component({
  selector: 'app-root',
  // 3. 父组件接受 addItemEvent 事件
  template: `
    <app-child (addItemEvent)="addItem($event)" />
    <p>🐢 all the way down {{ items.length }}</p>
  `,
  standalone: true,
  imports: [ChildComponent],
})
export class AppComponent {
  items = new Array();

  // 4. 父组件执行方法
  addItem(item: string) {
    this.items.push(item);
  }
}

child.component.ts

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

@Component({
  selector: 'app-child',
  styles: `.btn { padding: 5px; }`,
  template: `
    <button class="btn" (click)="addItem()">Add Item</button>
  `,
  standalone: true,
})
export class ChildComponent {
  // 1. 注册一个事件
  @Output() addItemEvent = new EventEmitter<string>()
  // 2. 在触发 addItem 的时候，通过 .emit 触发 addItemEvent 事件
  addItem() {
    this.addItemEvent.emit('🐢')
  }
}

可延迟视图

import {Component} from '@angular/core';
import {CommentsComponent} from './comments.component';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>How I feel about Angular</h1>
      <article>
        <p>...</p>
      </article>
      @defer(on viewport){      <!-- 视口触发，在进入视口后才触发 -->
        <comments />            <!-- 组件内容 -->
      } @placeholder {
        <p>Future comments</p>  <!-- 占位 -->
      } @loading (minimum 2s){  <!-- 最短等待时间 -->
        <p>Loading comments</p> <!-- 加载信息 -->
      }
    </div>
  `,
  standalone: true,
  imports: [CommentsComponent],
})
export class AppComponent {}