新建

ng new pinduoduo 
ng new pinduoduo --skip-install --style css --routing false
ng new --help
ng help

typescript interface筆記
app.component.ts

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

interface TopMenu {
  title: string;
  readonly link?: string;
}

type AddFunc = (x: number, y: number) => number;

interface Dict {
  [key: string]: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = '拼多多';
  menus: TopMenu[] = [
    {
      title: '熱門',
      link: ''
    }
  ];
  dict: Dict = {
    a: '1',
    b: '2'
  }
  constructor() {
    this.test();
  }
  add: AddFunc = (x, y) => x + y;
  test(): void {
    console.log(this.dict.a);
  }
}

app.component.html

<ul>
  <li *ngFor="let item of menus"><a href="#">{{item.title}}</a></li>
</ul>

ngFor

<ul>
  <li *ngFor="let item of menus;let i=index; trackBy:identify">
    <a
      href="#"
      [class.active]="i === selectedIndex"
      (click)="handleSelection(i)"
    >
      {{item.title}}
    </a>
  </li>
</ul>

  identify( index: any, item: TopMenu): string {
    return item.title;
  }

創(chuàng)建組件命令

ng generate componment 組件名（駝峰形式）

ng g c ScrollableTab

2-8 樣式綁定的幾種方式[00_02_36][20210607-135443].png

組件生命周期

3-1 組件生命周期(1)[00_03_59][20210607-162158].png

3-6 組件的雙向綁定[00_01_35][20210609-094022].png

3-6 組件的雙向綁定[00_02_24][20210609-094117].png

3-7 模塊的概念[00_09_00][20210609-134635].png

雙向綁定
組件頁面

//視圖
<input type="text" [value]="username" (input)="handleInput($event)">
{{username}}

//代碼
  @Output() usernameChange = new EventEmitter()
  // tslint:disable-next-line:variable-name
  _username = ''
  
  constructor() { }
  ngOnInit(): void {}

  @Input()
  public set username(value: string) {
    this.usernameChange.emit(value);
    this._username = value;
  }

  public get username(): string{
    return this._username;
  }

  handleInput(ev: any): void {
    console.log(ev);
    this.username = ev.target.value;
  }

主頁

<app-horizontal-grid  [(username)]="username"></app-horizontal-grid>
  username = '123'

4-10 路由 URL 和參數(shù)(2)[00_03_03][20210615-164640].png

4-10 路由 URL 和參數(shù)(2)[00_04_47][20210615-165204].png

4-10 路由 URL 和參數(shù)(2)[00_05_05][20210615-165217].png

依賴注入

4-13 依賴注入(1)[00_03_34][20210621-093455].png