袁同学的Angular5专案学习

---

1.实现大图

---

2.TS

在TS里调用方法的时候，ngOnInot中最好只调用方法，再用一个方法来装其他下层方法。总的来说也是Component间的那种组件关系，能使代码看起来更清晰有序。

ngOnInit(): void {

    this.totalSolve();

  }

  totalSolve(): void {
    const arr = [3, 4, 1, 2, 1, 3, 2, 1, 4, 6, 5];
    this.bubbleSort(arr);
    this.total = arr[0] + arr[1] + arr[2];
    this.items = [{ is: 'IS1', num: arr[0] }, { is: 'IS2', num: arr[1] }, { is: 'IS3', num: arr[2] }];
  }

  bubbleSort(arr: any[]): any[] {
    const max = arr.length - 1;
    for (let j = 0; j < arr.length - 1; j++) {
      let done = true;
      for (let i = 0; i < max - j; i++) {
        if (arr[i] < arr[i + 1]) {
          const temp = arr[i];
          arr[i] = arr[i + 1];
          arr[i + 1] = temp;
          done = false;
        }
      }
      if (done) {
        break;
      }
    }
    return arr;
  }

---

总结

这是Angular项目实训第二周，过程中遇到不少问题
一：最初的布局假如缩小和放大，那么整个接口样式就会被挤乱。overflow这个属性以前被我忽略了，它的作用是隐藏超出容器的元素。
二：不同层级的Component中传参该怎么传，ngfor之后值要去哪里拿。
三：在TS里调用方法的时候，ngOnInot中最好只调用方法，再用一个方法来装其他下层方法。总的来说也是Component间的那种组件关系，能使代码看起来更清晰有序。
总结：任何元素任何属性都不能忽略，也许某个时候你就得需要它，得明白其含义与用法。Angular的组件思想不光体现在样式呈现上，当一个TS里面拥有较多方法的时候，也可以运用这种思想来帮助你理清条理。

袁同学——2020年10月23日