Question

我一直在使用产品列表项目，在配置路线以在不同视图之间导航时，我在'@Routes'装饰器下得到一个红色波浪形，当我将鼠标悬停在路径上时，它说'路由仅指的是类型，但在这里被用作值'。我在这里研究了很多景点，并尝试了许多不同的方法来解决这个问题，但我找不到问题。

app.component.ts

import { Component } from '@angular/core';
import { ProductListComponent } from './products/product-list.Component';
import { ProductService } from './products/product.service'
import { Routes } from '@angular/router';
import 'rxjs/Rx'; // Load all features
import { WelcomeComponent } from './home/welcome.component'
@Component({
selector: 'pm-app',
template: `
    <div>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <a class='navbar-brand'>{{pageTitle}}</a>
                <ul class='nav navbar-nav'>
                    <li><a>Home</a></li>
                    <li><a>Product List</a></li>
                </ul>
            </div>
        </nav>
    </div> 
    ` ,   
    entryComponents : [ProductListComponent],
    providers: [ProductService]
})

@Routes([
{ path: '/welcome' , name: 'Welcome' , component: WelcomeComponent,   useAsDefault: true},
{ path: '/products' , name: 'Products' , component: ProductListComponent }

])

export class AppComponent {

pageTitle:string = 'Acme Product Management';
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ProductListComponent } from './products/product-list.Component';
import { HttpModule } from "@angular/http";
import { RouterModule } from '@angular/router'

import { ProductFilterPipe } from './products/product-filter.pipe';
import { StarComponent } from './shared/star.component';

import { AppComponent }  from './app.component';

@NgModule({
imports: [ BrowserModule,FormsModule,HttpModule,RouterModule],
declarations: [   AppComponent,ProductListComponent,ProductFilterPipe,StarComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }

welcome.compnent.ts

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

@Component({
templateUrl: 'app/home/welcome.component.html'
})
export class WelcomeComponent {
public pageTitle: string = 'Welcome';
}

我认为我的编码很好。但无法得到预期的结果。请帮助！

Answer 1

发现，问题是......使用RC5，路由是一个路径的数组＆amp;不再是装饰器，你必须导入'RouterModule'而不是'provideRouter'。导出时必须使用'RouterModule.forRoot'。

对于RC5，我们在配置路由时不再指定组件的字符串名称，而是仅指定路径＆amp;仅限组件。我们不再使用前缀'/'作为路径。此外，我们不再使用useAsDefault，而是使用redirectTo属性来配置默认路径。

我使用了一个单独的模块来执行我的路由配置，而不是像之前那样在根组件中执行它。我的路由配置的更新版本如下所示。希望这会有所帮助。

app.routes.ts

import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './products/product-list.Component';
import { WelcomeComponent } from './home/welcome.component'
import { ProductDetailComponent } from './products/product-   detail.component';

const routes: Routes = [
{ 
    path: 'welcome' , 
    component: WelcomeComponent,
},

{ 
    path: 'products' , 
    component: ProductListComponent 
},

{ 
    path: 'product/:id' , 
    component: ProductDetailComponent 
},

{
    path:'',
    redirectTo:'/welcome',
    pathMatch:'full'
},
];

export const routing = RouterModule.forRoot(routes);

在Angular 2中配置路由时出错

1 个答案: