小编Mar*_*kov的帖子

我是Angular 1开发人员,开始学习Angular 2.根据培训材料,有很多不同类型的文件夹结构方法.我将在下面列出每一个,我希望得到人们对我应该使用的意见和原因.此外,如果有一个未列出的方法,但您认为它的效果更好,请随时列出.

通过查看所有这些,方法#3几乎就是我在使用Angular 1应用程序的方式.

方法1:angular2-quickstart

资料来源:https://angular.io/guide/quickstart

文件夹结构:

方法2:ng-book2

来源:https://www.ng-book.com/2/(必须付费查看文件)

文件夹结构:

方法3:mgechev/angular2-seed

资料来源:https://github.com/mgechev/angular2-seed

文件夹结构:

因此,假设您有一个具有工具栏,侧边栏和网格的界面.工具栏有一个下拉列表,当用户更改时,侧边栏和网格中的内容会发生变化.回到Angular 1,我会使用Service来获取所有动态数据.当服务中的某些内容发生变化时,使用该服务的所有组件也将更新.

在Angular 2中,看起来人们正在使用不同的方法.我希望得到您的输入,这是首选方式.

• 静态服务
• OnChanges
• 输入和输出

更新 - 03/09/16

看起来最好的解决方案是Thierry Templier发布的帖子:委托:Angular2中的EventEmitter或Observable

我剩下的问题是,最佳做法是为组件之间共享的每个数据项创建新服务,还是只有一个服务具有存储所有共享数据的对象.

import {Component} from 'angular2/core';
import {NavService} from '../services/NavService';

@Component({
  selector: 'obs-comp',
  template: `obs component, item: {{item}}`
})
export class ObservingComponent {
  item: number;
  subscription: any;
  constructor(private _navService:NavService) {}
  ngOnInit() {
    this.item = this._navService.navItem();
    this.subscription = this._navService.navChange$.subscribe(
      item => this.selectedNavItem(item));
  }
  selectedNavItem(item: number) {
    this.item = item;
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'my-nav',
  template:`
    <div class="nav-item" (click)="selectedNavItem(1)">nav 1 (click me)</div>
    <div class="nav-item" (click)="selectedNavItem(2)">nav 2 …

在查看了许多不同的论坛帖子和示例项目之后,人们似乎在服务或实用程序之间选择相同类型的功能.到目前为止我所读到的是人们说服务更好,因为依赖注入会使测试变得更容易.其他人说utils更好,因为它们更快.我想知道是否有任何类型的首选规则何时使用服务vs util,为什么？

以下是从加载的数据中提取表列的示例:

服务

export class TableService {
  getColumns(data:Array<any>):Array<GridColumnInterface> {
    let columns:Array<GridColumnInterface> = [];

    data.forEach((column:any, index:number) => {
      columns.push({
        headerName: column.name,
        field: String(index),
        hide: column.isHidden,
        class: 'text-center'
      });
    });

    return columns;
  }
}

UTIL

export class TableUtil {
  static getColumns(data:Array<any>):Array<GridColumnInterface> {
    let columns:Array<GridColumnInterface> = [];

    data.forEach((column:any, index:number) => {
      columns.push({
        headerName: column.name,
        field: String(index),
        hide: column.isHidden,
        class: 'text-center'
      });
    });

    return columns;
  }
}

那么你会选择哪个以及为什么？

我想用svg绘制一个钟形曲线，如下图所示。所以从本质上讲，我应该能够传递3个参数：x1，x2和height，它应该绘制一条虚线的钟形曲线。实现此目标的最佳方法是什么？

这是绘制常规贝塞尔曲线的功能。基本上，我需要弄清楚如何将其转换为钟形曲线：

function getDimension(x1, x2, height) {
  return "M" + x1 + "," + height + " C" + x1 + ",0 " + x2 + ",0 " + x2 + "," + height;
}

var curve = document.createElementNS("http://www.w3.org/2000/svg", "path");
curve.setAttribute("d", getDimension(0, 100, 50));
curve.setAttribute("x", '0');
curve.setAttribute("fill", 'none');
curve.setAttribute("stroke", 'black');
curve.setAttribute("stroke-dasharray", '5');
document.getElementById('svg').appendChild(curve);