[memo]Angular2 + TypeScript コーディング色々( 随時追加 )

# ルーティング
- `src/app` 内にrouting用ファイル作成（今回は `app.routing.module.ts` )

```js

import { NgModule }             from '@angular/core';
import { Routes, RouterModule } from "@angular/router";

import { ComponentName1 }       from './component-1.component';
import { ComponentName2 }       from './component-2.component';

const routes: Routes = [
  { path: '', component: ComponentName1 },
  {
    path: 'hoge',
    children: [
      { path: '', component: ComponentName2 },
      { path: ':type', component: ComponentName2 },
    ]
  },
  { path: '**', redirectTo: '/' }
];

@NgModule( {
  imports: [ RouterModule.forRoot( routes ) ],
  exports: [ RouterModule ]
} )

export class AppRoutingModule {}

```

- `src/app/app.module.ts` 

`import { AppRoutingModule } from './app.routing.module';` を追記
`@NgModule` の `imports` に `AppRoutingModule`　を追記




# URL のパラメータの取得処理

## 前提条件
- URL : `domain.com/hoge/test?param=param_string`
- routing

```js

const routes: Routes = [
  {
    path: 'hoge',
    children: [
      { path: '', component: componentName },
      { path: ':type', component: componentName },
    ]
  },
];
```

or 

```js

const routes: Routes = [
  { path: 'hoge/:type', component: componentName },
];
```

- component

```js

import { ActivatedRoute } from "@angular/router";

export class ComponentName implements OnInit {

  constructor(
    private route: ActivatedRoute,
  ) { }

}
```

## /で区切られたパラーメータを取得
```js

let type  = '';
this.route.params.subscribe( params => {
  type    = params['type'];
});
```

## クエリパラーメータを取得
```js

let param    = this.route.snapshot.queryParams['param'];
```

# 定数
- `src/environment` に `environment.ts` と `environment.local.ts` や `environment.dev.ts`　などの　`environment.[環境].ts`を作成


```js
export const environment = {
  production: false,
  CONF_1: 'hoge',
};
```

- `src/main.ts` に `import { environment } from './environments/environment';` を追記
- 必要なファイル内で　`import { environment } from 'environments/environment';` を追記し　`environment.CONF_1`等と使用
- `ng serve` の際に `ng serve --env=local` 等で環境指定する

# formの書き方

submitボタンの押下時Angular側で処理する

```html

<form (ngSubmit)="onClick( input.value )" method="post">
  <input type="text" [(ngModel)]="input.value" name="InputValue" value="{{input.value}}" required>
  <button type="submit">Sign In</button>
</form>
```

submitボタンの押下時に指定されたURLへ直接リクエストする

```html
<form ngNoForm action="[URL]" method="post">
  <input type="text" [(ngModel)]="input.value" name="InputValue" value="{{input.value}}" required>
  <button type="submit">Sign In</button>
</form>
```

# EventEmitter

子コンポーネントから親コンポーネントへイベントのEmit

## Child

### child.component.ts

```js
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent{

  @Output( 'eventEmitterEvent' ) eventEmitter: EventEmitter<any> = new EventEmitter();

  constructor() { }
  
  
  onEvent(){
    this.eventEmitter.emit();
  }

}
```

## Parent

### parent.component.html

```html
<app-child (eventEmitterEvent)="handleEmitEvent()"></app-child>
```

### parent.component.ts

```js
  handleEmitEvent(){
    
  }
```