Question

我已经开始用打字稿学习angular2了，我试图实现book /：id的路线，但我的路线没有改变，html也没有。

我有一个名为app.module.ts的文件，它的所有其他路由都有效：

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { BookComponent } from'./components/book/book.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent,
        BookComponent
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'book/:id', component: BookComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

我的图书组件使用ngOnInit从网址获取ID

book.component.ts

import { Component } from '@angular/core';
import { LibraryService } from '../../services/app.service.library';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'book',
    template: require('./book.component.html'),
    providers: [LibraryService]
})
export class BookComponent {
    book: any;

    constructor(private libraryService: LibraryService, private route: ActivatedRoute) {}

    ngOnInit() {
        // prints to console id e.g. 1
        console.log(this.route.snapshot.params["id"]);
        this.libraryService.getBook(this.route.snapshot.params["id"])
            .subscribe(response => this.book = response);
    }
}

如果我在浏览器中输入网址＆＃34; http://localhost:60369/book/1＆＃34;我得到了这个堆栈跟踪错误：

处理请求时发生未处理的异常。例外：调用节点模块失败，错误：TypeError：不能阅读财产＆＃39; id＆＃39;未定义的 AppView._View_BookComponent0.detectChangesInternal （BookComponent.ngfactory.js：27：82）在AppView.detectChanges （C：\ Users \ GOWDY_N \ Documents \ Visual Studio 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9566：18）在AppView.detectViewChildrenChanges （C：\ Users \ GOWDY_N \ Documents \ Visual Studio 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9592：23）在AppView._View_BookComponent_Host0.detectChangesInternal （BookComponent_Host.ngfactory.js：32：8）在AppView.detectChanges （C：\ Users \ GOWDY_N \ Documents \ Visual Studio 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9566：18）在AppView.detectContentChildrenChanges （C：\ Users \ GOWDY_N \ Documents \ Visual Studio 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9584：23）在AppView.detectChangesInternal（C：\ Users \ GOWDY_N \ Documents \ Visual 工作室 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9576：18）在AppView.detectChanges（C：\ Users \ GOWDY_N \ Documents \ Visual Studio 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9566：18）在AppView.detectViewChildrenChanges （C：\ Users \ GOWDY_N \ Documents \ Visual Studio 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9592：23）在AppView.detectChangesInternal（C：\ Users \ GOWDY_N \ Documents \ Visual 工作室 2015 \项目\ MyAngular2App \ MyAngular2App \ node_modules \ @angular \芯\束\ core.umd.js：9577：18）

另外，如果我尝试从主屏幕导航到书页，我的console.log在ngOnInit中工作，但是网址没有改变，新内容也没有加载。

home.component.ts

import { Component } from '@angular/core';
import { LibraryService } from '../../services/app.service.library';

@Component({
    selector: 'home',
    template: require('./home.component.html'),
    providers: [LibraryService]
})
export class HomeComponent {
    books: Array<any>;

    constructor(private libraryService: LibraryService) { }

    ngOnInit() {
        this.libraryService.getBooks().subscribe(response => {
            this.books = response;
        });
    }
}

home.component.html

<div class="row">
<div class="jumbotron">
    <h1>Book Store</h1>

    <div id="custom-search-input">
        <div class="input-group col-md-12">
            <input type="text" class="form-control input-lg" placeholder="Book title, author, etc" />
            <span class="input-group-btn">
                <button class="btn btn-info btn-lg" type="button">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </span>
        </div>
    </div>

</div>
<div class="col-md-12">
    <ul>
        <li *ngFor="let book of books" style="list-style-type: none; padding: 10px;" class="col-md-4 hvr-curl-top-left">
            <div class="card" style="border-color: black; border-style: solid; border-width: thin; padding: 5px;">
                <div class="card-block">
                    <h3 class="card-title">{{book.title}}</h3>
                    <p class="card-text">{{book.description}}</p>
                    <a href="#" [routerLinkActive]="['link-active']" class="btn btn-primary" [routerLink]="['/book', book.id]">More details</a>
                </div>
            </div>
        </li>
    </ul>
</div>

点击此链接：

<a href="#" [routerLinkActive]="['link-active']" class="btn btn-primary" [routerLink]="['/book', book.id]">More details</a>

没有给我一个堆栈跟踪错误但是新内容没有加载且网址保持不变。我还在book.component.ts中获得了console.log消息，并且库服务也可以。

我无法看到我失踪的东西。

Answer 1

我在最初的问题上取得了一些进展。因为我正在学习angular2以及我可以用它做的所有事情，所以我最初编写的代码是当用户从主页进入带有url book / 1的书页时使用subscribe。

但是我现在改变了我使用订阅的方式，因为我收到了模板错误。

我之前在ngOnInit上使用过它：

ngOnInit() {
    this.libraryService.getBooks().subscribe(response => {
        this.books = response;
    });
}

但现在我已将其更改为：

ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            const id = params["id"];
            this.book = this.libraryService.getBook(id);
        });
    }

现在使用subscribe感觉有点多余，因为它只是一个简单的api调用，我不需要在我的角度代码中观察任何内容。

我现在暂时留下这个答案，但如果有人得到更好的答案，我会将答案标记为正确。

Answer 2

您正在尝试直接访问路由器参数，这可能会导致页面加载时未定义。

尝试将其保存到本地变量，如：

 let params: Params = this.route.snapshot.params;

之后执行params []

上的代码

Angular2路由 - url不会更改，页面也不会加载

2 个答案: