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

使用Angular 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>

任何建议都将不胜感激

Answer 1

我这样做的方法是在路由器链接的末尾添加一个id，因此它会路由到book / thebookid。

然后你会在路由模块中添加一些内容，如下所示：

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

然后在您的图书组件中，您需要在网址中查找该ID，并告诉它从您的服务中获取图书。你需要导入一些东西来实现它。

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

然后在你的构造函数中你必须实例化其中的一些：

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

您实际上可能也希望从'@ angular / core'导入OnInit，因此它运行初始化组件所需的逻辑。所以也将它添加到组件的顶部。

 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
}

Angular 2路线选项

1 个答案: