2017-11-05 5 views
2

MySQLデータベースから単一の行(IDを使用)をフェッチしようとするAngular 4アプリケーションがあります。 ExpressJSでNodeJSを使用しています。しかし、私は正確なURLパスを共有せずにURLからIDを取得する方法を見つけるのに苦労しています。これは、コンポーネントではなくJSONオブジェクトのみをレンダリングするWebサイトにつながります。URLを共有しないで正しいIDを取得する

server.js

app.get('api/books/:id', (req, res) => { console.log(req.params.id); });

URLがlocalhost:3000/books/3ある場合は、コンソールは:idを記録します。
localhost:3000/api/books/3ただし、正しいIDをコンソールに記録します。問題は、Angularルーティングで後者をURLとして使用すると共有パスになり、動作しなくなることです。ここで

は、私は、サーバーにGETリクエストを送信するために角度のHttpModuleをを使用する方法の例です:ここで

this.http.get('api/books/:id') 
    .map(res => res.json()) 
    .subscribe(data => { 
    this.bookDetail = data; 
}); 

は角のRouterModuleを使用してルーティングからの私のパスです:
どの

{ path: 'books/:id', component: BookDetailComponent } 

私はこの問題を解決するつもりですか?

答えて

2

このコンポーネントのinitでangleアプリケーションがサーバーへのHTTPリクエストをトリガーする関数を作成する必要があります。たとえば、私はブログアプリケーションを持っています。

{ path: 'blogs/:id', component: BlogComponent }, 

ngOnInit() { 
    this.route.params.subscribe(params => this.blog = params.id); 
    this.getBlog(this.blog);} 

    getBlog(blog) { 
    this.blogService.getBlog(blog).subscribe(
     data => { this.foundBlog = data; 
     if (data.comments) { 
      this.comments = data.comments; 
     } 

    getBlog(blog): Observable<any> { 
    return this.http.get(`http://localhost:3000/api/blogs/${blog}`).map(res => res.json()); 
    } 

最初は私のルートである、第二は、私のブログのコンポーネントにinit関数である

第三は、getブログ機能であるブログのコンポーネントに

最後は上のgetブログ機能であります私のblogservice、そのHTTPリクエストを送信

うまくいけば助けてください。

+0

それは魅力的に機能しました!しかし、 '' http:// localhost:3000/api/books/$ {id} ''を'' http:// localhost:3000/api/books/'+ id'に変更する必要がありました。ありがとう! – user3510657

+0

うれしい私は助けることができました! – Matt

関連する問題