首页 文章

找不到名字@Routes

提问于
浏览 次
3

我正在制作一个有几个子节点的布局对象，我希望父对象声明所有子对象的路由 - 最好不要在我的app.module.ts中 .

这是我的标记 HomeLayoutComponent

<router-outlet name="body"></router-outlet>
<router-outlet name="css"></router-outlet>
<router-outlet name="header"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>
<router-outlet name="scripts"></router-outlet>

这里有一点点，但是我必须更换各个部分，因为我有各种页面的3个不同的模板，包括不同的css，不同的脚本，甚至 <body> 标签上的不同属性 .

现在 HomeLayoutComponent 的打字稿

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

import { HomeBodyComponent } from './home-body.component';
import { HomeCssComponent } from './home-css.component';
import { HomeHeaderComponent } from './home-header.component';
import { HomeContentComponent } from './home-content.component';
import { HomeFooterComponent } from './home-footer.component';
import { HomeScriptsComponent } from './home-scripts.component';

@Component({
    selector: 'home-layout',
    template: require('./home-layout.component.html')
})
@Routes([
        { path: '', component: HomeBodyComponent, outlet: 'body' },
        { path: '', component: HomeCssComponent, outlet: 'css' },
        { path: '', component: HomeHeaderComponent, outlet: 'header' },
        { path: '', component: HomeContentComponent },
        { path: '', component: HomeFooterComponent, outlet: 'footer' },
        { path: '', component: HomeScriptsComponent, outlet: 'scripts' }
])
export class HomeLayoutComponent {

}

我的问题是@Routes错误地显示以下错误消息：

错误TS2304：找不到名称'Routes' .

也许我这样做是错的，我需要把路线放在app.module中 . 我想在那个文件中避免这么多路由 .

根据Difference between router and router-deprecated in angular2，我应该使用Routes而不是我在几乎所有其他谷歌搜索结果中看到的RouterConfig .

angular angular2-routing

1 回答

  • 5

    这不再是您创建路线的方式 . 现在您需要使用 RouterModule ，并使用路由对其进行配置 . Routes 仍然是一个东西，但它不是用作装饰器 . 它是应该传递给 RouterModule.forRoot(Routes) 的类型 . 所以我们会做类似的事情

    import { RouterModule, Routes } from '@angular/router'

const routes: Routes = [
  { path: '', component: HomeBodyComponent, outlet: 'body' },
  { path: '', component: HomeCssComponent, outlet: 'css' },
  { path: '', component: HomeHeaderComponent, outlet: 'header' },
  { path: '', component: HomeContentComponent },
  { path: '', component: HomeFooterComponent, outlet: 'footer' },
  { path: '', component: HomeScriptsComponent, outlet: 'scripts' }
]

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  bootstrap: [ AppComponent ]
})
class AppModule {}

    在这里，我们需要将 RouterModule 导入 AppModule ，调用其 forRoot 方法，传入 Routes . 如果路由通常是一个不同的文件，那么你可以做类似的事情

    app.routing.ts

    const routes: Routes = [...]

export const appRouting = RouterModule.forRoot(routes);

    app.module.ts

    import { appRouting } from './app.routing'

@NgModule({
  imports: [ appRouting ]
})
class AppModule {}

    See also:

    回复于

相关问题