iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
自我挑戰組

Angular+Spring Boot API 處理股市資料系列 第 26

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 { }

然後我們啟動專案,此時爆出一個錯誤

https://ithelp.ithome.com.tw/upload/images/20211011/20138857XYw7Yx73FW.png

檢查之後發現,原來之前忽略沒有把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 { }

把元件放進模組宣告後就可以啟動專案囉~!


首頁,點選連結

https://ithelp.ithome.com.tw/upload/images/20211011/20138857U4twJzMDkI.png

結果

https://ithelp.ithome.com.tw/upload/images/20211011/20138857k7mlWwzWLm.png

參考資料

RouterLink


上一篇
Angular Stock登入(四)(Day25)
下一篇
Angular Stock上市個股日成交(一)(Day27)
系列文
Angular+Spring Boot API 處理股市資料32

尚未有邦友留言

立即登入留言