路由到另一个组件时的问题

Question

我有名为demo和home的组件。我已经将demo组件放置在app.component.html文件中。 demo组件如下所示：

如图所示，demo组件具有button (HOME)。对于此按钮，我给了路由器链接以导航到home组件。现在，它导航到首页component很好，但是demo和home都显示在同一页面上。我想在单独的页面中路由它。

Stackblitz DEMO

Answer 1

app.component.html（删除演示组件）

 <router-outlet></router-outlet>

更新您的路由器以添加演示路径：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; 
import { HomeComponent } from './home/home.component';
import { DemoComponent } from './demo/demo.component';

const routes: Routes = [
{ path: 'demo', component: DemoComponent },
{ path: 'home', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

问题是您要在路由器出口之外渲染演示组件。

Answer 2

如果您想默认显示Demo组件，但是在更改路线时将其删除，则可以像以下那样更新您的路线配置：

const routes: Routes = [
    { path: '', component: DemoComponent },   // this will route to demo component by default;
    { path: 'home', component: HomeComponent },
];

在您的<router-outlet></router-outlet>中放入app.component.html。

在您的示例中，您将demo component静态地添加到了app component上，因此这意味着它将一直存在（除非您添加一些条件）

https://stackblitz.com/edit/angular-material2-issue-fkwdrm?file=app%2Fapp-routing.module.ts

Answer 3

从StackBlitz中查看app.component.html文件：

<app-demo></app-demo>
<router-outlet></router-outlet>

这告诉Angular路由器显示app-demo组件以及路由器应该显示的任何组件。只需从主应用程序组件中删除应用程序演示，就可以了。