shohu.yudai score 10
2017/09/27 16:05 投稿
| Angular4からSpriteと決済をする方法 |
| AngularからSpriteを簡単に扱う方法として以下npmモジュールを見つけましたが |
| [https://www.npmjs.com/package/angular-stripe](https://www.npmjs.com/package/angular-stripe) |
| angular-stripeのページで記載されている以下Usageの書き方は |
| ```javascript |
| // node module exports the string 'angular-stripe' for convenience |
| angular.module('myApp', [ |
| require('angular-stripe') |
| ]) |
| // otherwise, include the code first then the module name |
| angular.module('myApp', [ |
| 'angular-stripe' |
| ]) |
| ``` |
| [https://angular.io/tutorial/toh-pt3](https://angular.io/tutorial/toh-pt3)へ適用する場合、app.module.tsやapp.component.tsなどにどのような修正を加えればよいのものでしょうか。 |
| ```typescript |
| app.componet.ts |
| ---- |
| import { Component } from '@angular/core'; |
| import { Hero } from './hero'; |
| const HEROES: Hero[] = [ |
| { id: 11, name: 'Mr. Nice' }, |
| { id: 12, name: 'Narco' }, |
| { id: 13, name: 'Bombasto' }, |
| { id: 14, name: 'Celeritas' }, |
| { id: 15, name: 'Magneta' }, |
| { id: 16, name: 'RubberMan' }, |
| { id: 17, name: 'Dynama' }, |
| { id: 18, name: 'Dr IQ' }, |
| { id: 19, name: 'Magma' }, |
| { id: 20, name: 'Tornado' } |
| ]; |
| @Component({ |
| selector: 'my-app', |
| template: ` |
| <h1>{{title}}</h1> |
| <h2>My Heroes</h2> |
| <ul class="heroes"> |
| <li *ngFor="let hero of heroes" |
| [class.selected]="hero === selectedHero" |
| (click)="onSelect(hero)"> |
| <span class="badge">{{hero.id}}</span> {{hero.name}} |
| </li> |
| </ul> |
| <hero-detail [hero]="selectedHero"></hero-detail> |
| `, |
| styles: [` |
| 省略・・・ |
| `] |
| }) |
| export class AppComponent { |
| title = 'Tour of Heroes'; |
| heroes = HEROES; |
| selectedHero: Hero; |
| onSelect(hero: Hero): void { |
| this.selectedHero = hero; |
| } |
| } |
| ``` |
| ```typescript |
| app.module.ts |
| ----- |
| import { NgModule } from '@angular/core'; |
| import { BrowserModule } from '@angular/platform-browser'; |
| import { FormsModule } from '@angular/forms'; |
| import { AppComponent } from './app.component'; |
| import { HeroDetailComponent } from './hero-detail.component'; |
| @NgModule({ |
| imports: [ |
| BrowserModule, |
| FormsModule |
| ], |
| declarations: [ |
| AppComponent, |
| HeroDetailComponent |
| ], |
| bootstrap: [ AppComponent ] |
| }) |
| export class AppModule { } |
| ``` |
| Spriteは本来ならばhtmlにscriptタグを埋め込むだけで決済画面が作れるのですが、Angularはhtmlを吐き出す際にscriptタグを削除してしまうため、[angular-stripe](https://www.npmjs.com/package/angular-stripe)などを使わないといけないとの認識です。 |
| Angular4でSpriteで決済できるようになれば、どのような方法でも構いませんが、色々調べた結果こちらのライブラリが良さそうだと思いました。 |
| 初歩的な質問かもしれませんが、何卒ご回答よろしくお願い致します。 |
