angluar学习笔记基本操作

新建

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;
  }

创建组件命令

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 和参数(2)[00_03_03][20210615-164640].png 4-10 路由 URL 和参数(2)[00_04_47][20210615-165204].png 4-10 路由 URL 和参数(2)[00_05_05][20210615-165217].png

依赖注入

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