Angular Stock首页(Day26)

今天我们要在首页设置可以连到上市个股日成交资讯的连结

我们此次是要利用RouterLink这个元件来创造连结

RouterLink:

When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more locations on the page.

此元件可以透过路径开启上市个股日成交资讯的component

路径设定:
Relative link paths

The first segment name can be prepended with /, ./, or ../.

• If the first segment begins with /, the router looks up the route from the root of the app. #从根目录开始找
• If the first segment begins with ./, or doesn't begin with a slash, the router looks in the children of the current activated route.#会从子连结开始找
• If the first segment begins with ../, the router goes up one level in the route tree.#会回到上层路径开始寻找

接下来就开始实作罗~!

新建上市个股日成交资讯的component

ng g c dailyTranctionStock

然後我们在index.html新增连结

<a [routerLink]="['/exchange/getStockDayAll']">上市个股日成交资讯</a>

在app.module新增路径

import { IndexComponent } from './index/index.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { ErrorComponent } from './error/error.component';
import { DailyTranctionStockComponent } from './daily-tranction-stock/daily-tranction-stock.component';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'index', component: IndexComponent },
  { path: 'exchange/getStockDayAll', component: DailyTranctionStockComponent }, #新增路径
  { path: '**', component: ErrorComponent }  // 万用路由，不可设在前面
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ErrorComponent,
    DailyTranctionStockComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }

然後我们启动专案，此时爆出一个错误

检查之後发现，原来之前忽略没有把IndexComponent 放到 ngModule的 declarations里面

import { IndexComponent } from './index/index.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { ErrorComponent } from './error/error.component';
import { DailyTranctionStockComponent } from './daily-tranction-stock/daily-tranction-stock.component';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'index', component: IndexComponent },
  { path: 'exchange/getStockDayAll', component: DailyTranctionStockComponent },
  { path: '**', component: ErrorComponent }  // 万用路由，不可设在前面
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ErrorComponent,
    IndexComponent, #新增元件
    DailyTranctionStockComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [RouterModule]
})
export class AppModule { }

把元件放进模组宣告後就可以启动专案罗~!

首页，点选连结

结果

参考资料

RouterLink