从基础到高级：逐步掌握角度信号

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

// creating a simple signal
const count = signal(0);

// reading signal value
console.log(count()); // output: 0

// updating signal value
count.set(1);

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

@component({
  selector: 'app-counter',
  template: `
    <div>
      <p>count: {{ count() }}</p>
      <button (click)="increment()">increment</button>
    </div>
  `
})
export class countercomponent {
  count = signal(0);

  increment() {
    this.count.set(this.count() + 1);
  }
}

const name = signal('john');
name.set('jane');

const counter = signal(0);
counter.update(value => value + 1);

const user = signal({ name: 'john', age: 25 });
user.mutate(value => {
  value.age = 26;
});

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

const price = signal(100);
const quantity = signal(2);
const total = computed(() => price() * quantity());

console.log(total()); // output: 200

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

const message = signal('hello');

effect(() => {
  console.log(`message changed to: ${message()}`);
});

message.set('hi'); // logs: "message changed to: hi"

interface product {
  id: number;
  name: string;
  price: number;
}

@component({
  selector: 'app-shopping-cart',
  template: `
    <div>
      <h2>shopping cart</h2>
      <div *ngfor="let item of cartitems()">
        {{ item.name }} - ${{ item.price }}
      </div>
      <p>total: ${{ carttotal() }}</p>
    </div>
  `
})
export class shoppingcartcomponent {
  cartitems = signal<product[]>([]);
  carttotal = computed(() => 
    this.cartitems().reduce((total, item) => total + item.price, 0)
  );

  addtocart(product: product) {
    this.cartitems.update(items => [...items, product]);
  }

  removefromcart(productid: number) {
    this.cartitems.update(items => 
      items.filter(item => item.id !== productid)
    );
  }
}

@component({
  selector: 'app-user-form',
  template: `
    <form (submit)="handlesubmit($event)">
      <input
        [value]="formdata().name"
        (input)="updatename($event)"
        placeholder="name"
      >
      <input
        [value]="formdata().email"
        (input)="updateemail($event)"
        placeholder="email"
      >
      <button type="submit">submit</button>
    </form>
  `
})
export class userformcomponent {
  formdata = signal({
    name: '',
    email: ''
  });

  updatename(event: event) {
    const input = event.target as htmlinputelement;
    this.formdata.update(data => ({
      ...data,
      name: input.value
    }));
  }

  updateemail(event: event) {
    const input = event.target as htmlinputelement;
    this.formdata.update(data => ({
      ...data,
      email: input.value
    }));
  }

  handlesubmit(event: event) {
    event.preventdefault();
    console.log('form submitted:', this.formdata());
  }
}

// good practice
const userprofile = signal<userprofile | null>(null);

// better practice with type safety
interface userprofile {
  name: string;
  email: string;
}
const userprofile = signal<userprofile>({
  name: '',
  email: ''
});

const apidata = signal<string | null>(null);
const error = signal<error | null>(null);

async function fetchdata() {
  try {
    const response = await fetch('api/data');
    const data = await response.json();
    apidata.set(data);
    error.set(null);
  } catch (e) {
    error.set(e as error);
  }
}

function createdebouncedsignal(initialvalue: string, delay: number) {
  const value = signal(initialvalue);
  let timeout: any;

  return {
    get: value,
    set: (newvalue: string) => {
      cleartimeout(timeout);
      timeout = settimeout(() => {
        value.set(newvalue);
      }, delay);
    }
  };
}

// usage
const searchquery = createdebouncedsignal('', 300);

@Component({
  template: `
    <div>
      <div *ngIf="loading()">Loading...</div>
      <div *ngIf="error()">{{ error() }}</div>
      <div *ngIf="data()">
        {{ data() | json }}
      </div>
    </div>
  `
})
export class AsyncDataComponent {
  data = signal<any>(null);
  loading = signal(false);
  error = signal<string | null>(null);

  async fetchData() {
    this.loading.set(true);
    try {
      const response = await fetch('api/data');
      const result = await response.json();
      this.data.set(result);
    } catch (e) {
      this.error.set(e.message);
    } finally {
      this.loading.set(false);
    }
  }
}