代码之家 › 专栏 › 技术社区 › Trajan

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

angular2-routing typescript angular css html

Trajan · 技术社区 · 6 年前

我正在尝试从主页(即localhost.com)更改为另一个页面(localhost.com/listing)。该应用程序构建正确,但当我尝试更改页面时,什么都没有发生。

我主要遵循了教程, https://www.youtube.com/watch?v=L6ipgij-AUw .

这是我的完整应用程序。单元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函数是否位于正确的位置。我得到了这个问题的部分解&一块板,但不确定其位置是否正确。我使用检查了listings组件是否正常工作。上面写着“列表有效!”但仍然可以在同一主页上执行此操作(理想情况下,这应该是一个带有“listings works!”的空白白色页面,例如,无导航条)。

我应该如何正确地路由到新页面(即在/列表中没有主页的痕迹)?我无法理解为什么会发生这种情况,因为列表。组成部分html不包括主页中的任何内容。

有关更多信息,请参阅: https://github.com/gf1721/directoryapp .

2 回复 | 直到 6 年前

Gurgen Grigoryan 6 年前

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

步骤1:

这将在src/app文件夹中为您生成一个应用程序路由模块。

ng g m app-routing

第2步:

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

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

使用routes设置添加常量:

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>

“主页”上的内容将显示在路由器出口所在的位置。

Sajeetharan 6 年前

从…起

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

到

btnClick () : void {
   this.router.navigate('/listing');
}

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

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