Question

我正在制作一个有几个子节点的布局对象，我希望父对象为所有子对象声明路由 - 最好不要在我的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，我应该使用路由而不是我在几乎所有其他谷歌搜索结果中看到的RouterConfig。

Answer 1

这不再是您创建路线的方式。现在您需要使用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 {}

另见：

Routing & Navigation

找不到名字@Routes

1 个答案: