Edited at

AngularコードのRegion切り:Component

More than 1 year has passed since last update.

私はAngular開発にはVisual Studio Codeを使っているんですが、

// #region XXXXX// #endregionで囲むと、行番号のとこに [-] マークが現れ、折りたためるようになります。

やっぱ便利ですよね。欲しかった人多いようです。

https://github.com/Microsoft/TypeScript/issues/11073

AngularのComponentは、ビューのためにいろんなコードが入ってきてわかりづらくなるので、次のようなRegionで区切っています。

大体いつも切ってるRegionを、既存コードからコピペするの面倒なので、メモ代わりに投稿します。


区切り方

@Component({

selector: 'app-foobar',
templateUrl: 'foobar.html',
})
export class FoobarComponent {
// #region インタフェース

@Input() ...
@Output() ...

// #endregion

// #region コンストラクタ・ライフサイクル

constructor(
private http: HttpClient,
private router: Router,
) {
...
}

ngOnInit() {
...

// #endregion

// #region ビューバインド

@ViewChild('child') child: ChildComponent;
...

public viewModel: any;
...

// #endregion

// #region イベント

public onClickSearch() {
...

// #endregion

// #region プライベート

private fixedArray: any[] = ['aaa', 'bbb', 'ccc'];
private myMethod() {
...

// #endregion
}


コピペ用

  // #reion インタフェース

// #endregion

// #region コンストラクタ・ライフサイクル

// #endregion

// #region イベント

// #endregion

// #region ビューバインド

// #endregion

// #region プライベート

// #endregion


2018/03/23追記

ビューに表示するモデルをコンポーネントに保持しておく場合は、ビューモデルを別にするのがわかりやすそう。Regionは重ね掛けできます。


// #reion インタフェース

// #endregion

// #region コンストラクタ・ライフサイクル

// #endregion

// #region ビューバインド

// #region ビューモデル

// #endregion

// #endregion

// #region イベント

// #endregion

// #region 内部メンバ

// #endregion