Question

我使用的是angular2 rc4版本。我有3个组件。

AppComponent ：在app.component.html文件中，我使用选择器HomeComponent呈现另一个名为<app-home></app-home>的组件

HomeComponent ：此处，home.component.html文件中有一些内容和指向Dashboard的链接。

<a class="page-scroll" [routerLink]="['/dashboard']">Dashboard</a>

DashboardComponent ：dashboard.component.html文件中有一些内容。

在我的main.ts文件中，我已声明了我的路线并导入了必要的组件。代码段：

import { provideRouter, ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
import { DashboardComponent } from './app/dashboard/dashboard.component';


const routes: RouterConfig = [
  { path: '', redirectTo: 'home', terminal: true },
  { path: 'dashboard', component: DashboardComponent }

];

bootstrap(AppComponent, provideRouter(routes));

现在问题。我将<router-outlet></router-outlet>粘贴到我的home.component.html文件中，然后点击dashboard链接。它呈现dashboard.component.html，但home.component.html文件的内容仍在root-url/dashboard页面中。

如果我将<router-outlet></router-outlet>放在home.component.html文件的顶部，则在点击信息中心dashboard.component.html内容后首先显示内容，然后显示home.componet.html个内容。如果我将<router-outlet></router-outlet>放在home.component.html文件的底部，则在点击信息中心home.component.html内容后首先显示内容，然后显示dashboard.componet.html个内容。

我想要的是，点击dashboard链接只会显示信息中心内容。我该怎么做？因为我是一个新手，我无法独自解决这个问题。

Answer 1

您应该将<router-outlet>放入app.component

工作演示：https://plnkr.co/edit/hXJ6ZRv81kt4rvWhxoBD?p=preview

import { provideRouter, ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
import { DashboardComponent } from './app/dashboard/dashboard.component';


const routes: RouterConfig = [

  { path: '', redirectTo: 'home', terminal: true },
  { path: 'home', component: HomeComponent},
  { path: 'dashboard', component: DashboardCompnent}

];

bootstrap(AppComponent, provideRouter(routes));

并在 home.component

中

import { Router} from '@angular/router';
import { ROUTER_DIRECTIVES } from '@angular/router';

<a href="javascript:void(0)" class="page-scroll" (click)="redirect()">Dashboard</a>


constructor(private router: Router) {}
redirect()
{
    this.router.navigate(['/dashboard']);
}

Angular2路由不知道路由器输出的放置位置

1 个答案: