Question

我在app.module.ts：

中设置了如下路线

const appRoutes: Routes = [
    {path: 'home', component: AppComponent},
    {path: 'articles', component: ArticlesComponent},
    {path: 'portfolio', component: PortfolioComponent},
    {path: 'about', component: AboutComponent},
    {path: 'contact', component: ContactComponent}
]

@NgModule({
declarations: [
    AppComponent,
    ArticlesComponent,
    PortfolioComponent,
    AboutComponent,
    ContactComponent
],
imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes, { useHash: false })
]

我的app.component.html为：

<a routerLink="/home">HOME</a>
<a routerLink="/articles">ARTICLES</a>
<a routerLink="/portfolio">PORTFOLIO</a>
<a routerLink="/about">ABOUT</a>
<a routerLink="/contact">CONTACT</a

我的<router-outlet>中也有app.component.html，但是，当我点击要继续播放的组件时，它不会替换屏幕上显示的组件我主页的底部。

我已将[{1}}和BrowserAnimationsModule从NoopAnimationModule中取出，因为它适用于其他人，但是，同样的问题也会出现在我身上。

Answer 1

您需要在主机视图的HTML中使用routeroutlet。在那之后，它加载页面然后： <router-outlet></router-outlet>。也可能是你把它放在了错误的地方。

Answer 2

我认为这只是服务器中的一个错误或有角度的错误，因为我今天早上已经尝试过，它似乎正常工作。

Angular5路由器附加组件而不是替换它

2 个答案: