[英]Angular Routing: Replacing components
我正在為自己的學習做一個項目,並堅持解決這個簡單的問題。 我有第一個/主頁作為登錄/注冊頁面。 現在我想使用路由用其他組件替換頁面。 當我單擊注冊時,我只想看到注冊表單組件。 我有自己的 entry.routing 模塊 ENTRY,有登錄組件、注冊組件和注冊表單組件三個組件。 在第一頁上,我正在查看登錄和注冊組件,它們的指令位於應用程序組件的 html 中以查看它們。 如何在視圖中將表單 app.component 更改為 register-form.component?
這是我的一些代碼:
應用程序組件.html
<div class="flex-row">
<div class="flex-grow-one logo">
<h1>Something</h1>
</div>
<div class="flex-column flex-grow-one entry-section">
<app-login></app-login>
<div class="separation"></div>
<app-register></app-register>
</div>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { EntryModule } from './modules/entry/entry.module';
import { HeaderComponent } from './shared/components/header/header.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
EntryModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
entry.routing.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegisterFormComponent } from './components/register-form/register-form.component';
const entryRoutes: Routes = [
{ path: 'register-form', component: RegisterFormComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
entryRoutes
)
],
exports: [
RouterModule
]
})
export class EntryRouting {}
export const EntryRoutingComponents = [
RegisterFormComponent
];
注冊.component.html
<div class="card">
<div class="card-title">
<h2>REGISTER</h2>
</div>
<div class="card-content">
<div class="card-form">
<div class="card-input">
<input type="Email" name="Email" placeholder="Email"/>
</div>
<div class="card-input">
<input type="password" name="password" placeholder="Password"/>
</div>
<div class="card-actions">
<button routerLink="/register-form" class="button-register">Register</button>
</div>
</div>
</div>
</div>
我知道必須有一個路由器插座,但我真的不知道把它放在哪里,因為如果我把它放在 register.component.html 中,它會在同一個視圖中顯示 register-form 組件,路由器插座在哪里是。
定義一個路由模塊,您可以在其中定義 url 及其子 url。 在模塊中,為 register 組件創建一個父組件。 假設您的主頁 url 是 /home,它由 Rootcomponent 控制,它顯示頁眉和頁腳以及中間的一些內容。 所以根組件的 html 可能看起來像:
<div>some header info</div> <router-outlet></router-outlet> <div>some footer info</div>
路由模塊應如下所示:
const appRoute : Routes = [{ path: '/home', component: RootComponent, children: [ { path: '/login', component: AppComponent, }, { path: '/registration', component: RegisterComponent, } ] } @NgModule({ imports: [RouterModule.forRoot(appRoute)], exports: [RouterModule], }) export class myRouteModule {};
將模塊注入根模塊。
@NgModule({ declarations: [ RootComponent, AppComponent, registerComponent, ], imports: [ myRoutModule ] })
頁面中間內容由當前路由動態控制。 如果 url 是 /home/login,則將顯示應用程序視圖。 對於 /home/registration,將顯示注冊組件。
希望這會有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.