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

ルーティング

• src/app 内にrouting用ファイル作成（今回は app.routing.module.ts )

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

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

or

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

• component

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

export class ComponentName implements OnInit {

  constructor(
    private route: ActivatedRoute,
  ) { }

}

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

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

クエリパラーメータを取得

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

定数

• src/environment に environment.ts と environment.local.ts や environment.dev.ts　などの　environment.[環境].tsを作成

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側で処理する

<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へ直接リクエストする

<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

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

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

parent.component.ts

  handleEmitEvent(){

  }