Question

我正在尝试从主页（即localhost.com）更改为另一个页面（localhost.com/listing）。该应用程序正确构建，但当我尝试更改页面时，没有任何反应。

我主要关注教程https://www.youtube.com/watch?v=L6ipgij-AUw。

这是我的完整app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ListingsComponent } from './listings/listings.component';

@NgModule({
  declarations: [
    AppComponent,
    ListingsComponent 
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      {
        path: 'listing',
        component: ListingsComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {

  btnClick = function () {
    this.router.navigate('/listing');
  };

}

我不确定btnClick功能是否在正确的位置。我得到了这个Q＆amp; A板的部分解决方案，但不确定它在正确的位置。我已经通过使用检查了列表组件是否正常工作。它说“列表有效！”但仍然是从同一主页这样做（理想情况下，这应该是一个空白的白页，“列表工作！”，例如没有导航栏。）

我应该如何正确地路由到新页面（即没有/ list中的主页的跟踪）？我无法理解为什么会发生这种情况，因为listing.component.html不包含主页中的任何内容。

有关详细信息，请参阅：https://github.com/gf1721/directoryapp。

Answer 1

更改

发件人

let g:UltiSnipsExpandTrigger = '<C-m>'

要

btnClick = function () { this.router.navigate('/listing'); };

此外，按钮应位于组件上，您将其放置在模块内，无论如何都不起作用。

将按钮放在应用程序组件上并绑定逻辑以导航按钮点击，如上所述

Answer 2

根据您计划制作此应用程序的规模，您最好创建一个路由模块。

第1步：

这将在你的src / app文件夹中为你生成一个app-routing模块。

ng g m app-routing

第2步：

打开你的应用程序路由模块并导入你想要导航的所有组件以及routermodule和路由。

import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';

步骤：3

使用路径设置添加常量：

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'dashboard', component: DashboardComponent},
  {path: 'login', component: LoginComponent},
];

第4步

将您的路线添加到您的导入，然后导出路由器模块：

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  declarations: []
})

第5步

现在，在您的模板html文件中，您可以执行以下操作：

<button type="button" routerLink="/home">Go home</button>
<router-outlet></router-outlet>

“家”的内容将出现在路由器插座的位置。

无法在Angular 4中正确更改页面

2 个答案: