以编程方式在Angular 4.2.2中重定向

Question

我正在构建一个以“搜索”页面为默认值的玩具应用程序，然后它有一个“管理”页面。通过单击“搜索”页面上的按钮来调用管理页面。我对该过程的代码是这样的：

  constructor( private searchResultService: SearchService, private router: Router) {
    ....
  }

  goToAdminLogin(ev): void
  {
    this.router.navigate(['adminLogin'])
  }

然而，点击按钮时，唯一改变的是地址栏。

在我的app.module.ts中，我有这个：

RouterModule.forRoot([
  {
    path: 'search',
    redirectTo: '/search',
    pathMatch: 'full'
  },
  {
    path: 'adminLogin',
    component: AdminLoginComponent
  }
])

我已经检查了我的控制台，我没有看到它喷出任何错误消息。有谁知道为什么我的重定向无处可去？

非常感谢任何帮助。

编辑：添加AdminLoginComponent：

我的AdminLoginComponent看起来像这样：

import {Component, Inject, Input} from '@angular/core';
import {SearchService} from '../services/search.service';
import {SearchResponse} from '../remote/search-response';

@Component({
  selector: 'admin-login-component',
  templateUrl: './admin-login.component.html',
  styleUrls: ['./admin-login.component.css']
})
export class AdminLoginComponent {

  constructor( private searchResultService: SearchService)  {
  }
}

我的'admin-login.component.html'非常简单，如下所示：

<div>Hello</div>

编辑：解决方案

感谢Debbie K的解决方案是基本上从我的app.component中删除我的第一个UI。*并将其放在一个子组件中，类似于我的admin-login设置。我的app.component.html现在看起来像这样：

<router-outlet></router-outlet>

Answer 1

试试这个：

this.router.navigate(['/adminLogin'])

并设置路由器插座的层次结构：

<强> app.component.html

<router-outlet>＆lt; - 这个将显示任何整页。

<强> home.component.html

<header of menu stuff here>

<router-outlet>＆lt; - 这个会在页眉/页脚中显示任何内容

<footer stuff here>

我的速记在这里有意义吗？

Answer 2

这涉及三个简单步骤：

1. 导入路由器

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

2. 在构造函数中

   constructor(private router: Router){}

3. 导航到其他路由器

   this.router.navigate(['/about']);

导航到URL

`this.router.navigateByUrl('/home');`