角度2のルートオプション

Question

私はAngularとNode JSを初めて使用しています。現在、アプリケーションに取り組んでいます。これは、異なるコンポーネント間の最適なナビゲート方法を決める際に短期間で取り上げています。

Users are able to add the name of a user, and add books associated to that user

書籍名をクリックすると、私は具体的には、コメントとしてそのエントリを、情報を引っ張って、そのブックに関連付けられているコンポーネントにナビゲートすることを望みます。

Component that will render specific book information

、私はこのような問題に対処すべきかを理解したい角度2（MEANスタック）を使用して - 私はそれが簡単に両方をナビゲートするために作成し、情報を引き出すために特定の値を格納するべきデータベースからの本。

<article class="panel panel-default"> 
    <div class="panel-body"> 
      <div class="author"> 
       {{ author.fullName }} 
      </div> 
      <div class="addbook"> 
       <book-input [author]='author'></book-input> 
      </div> 
    </div> 
    <footer class="panel-footer"> 
     <div> 
      <ul *ngFor="let book of author.books"> 
       <li><a [routerLink]="['book']">{{ book }}</a></li> 
      </ul> 
     </div> 
    </footer> 
</article> 

任意の提案は非常に私はこれを行うだろう方法は、ルータのリンクの最後にIDを追加することで、そのブック/ thebookidのようなものにもルート

Answer 1

を理解されるであろう。

次に、あなたがそうのようなあなたのルーティングモジュールに何かを追加したい：

あなたの本コンポーネントで次に

{path: 'book/:id, component: BookComponent} 

、あなたはURLでそのIDを探してから本を取得するためにそれを伝えたいと思いますあなたのサービス。あなたはそれを実現させるためにいくつかのものをインポートしたいと思うでしょう。それは必要なロジックを実行しているので、

constructor(private router: Router, private route: ActivatedRoute){} 

あなたはおそらくあまりにも「@角度/コア」からのOnInitをインポートしたい、実際ます：

import {Router, ActivatedRoute, Params} from '@angular/router'; 

は、その後、あなたのコンストラクタで、あなたはそれらのいくつかをインスタンス化する必要がありますコンポーネントを初期化します。したがって、これをコンポーネントの上部にも追加します。

import {OnInit} from '@angular/core'; 

そして、あなたはあなたのコンポーネントに続いて

export class BookComponent implements OnInit {...} 

を宣言するとき、あなたのコンポーネントがそれを実装してください、あなたのngOnInitメソッドを宣言し、その内側に、あなたが本を取得するため、あなたのロジックを持つことができますAPI：

ngOnInit() { 
    if (this.route.snapshot.params && this.route.snapshot.params['id']) { // make sure id is present 
     bookService.getBookById(this.route.snapshot.params[id).subscribe((res)=>{ 
      this.book = res.json(); // this is just an example of where to put your call, not how to make it 
} else { 
//no id received, throw error whatever you need, show blank form etc 
}