Question

我正在做一个项目供自己学习，并停留在这个简单的问题上。我有首页/主页作为登录/注册页面。现在，我想使用路由将页面替换为其他组件。当我单击注册时，我只想查看寄存器形式的组件。我有带有自己的entry.routing的ENTRY模块，其中包括登录组件，寄存器组件和寄存器形式组件三个组件。在第一页上，我正在查看登录和注册组件，它们的指令位于应用程序组件的html中以查看它们。如何在视图中将表单app.component更改为register-form.component？

这是我的一些代码：

app.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
];

register.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中，它将在同一视图上显示寄存器形式的组件，路由器插座是。

Answer 1

定义一个路由模块，在其中定义URL及其子URL。在模块中，为registercomponent创建一个父组件。假设您的起始网址是/ home，由Rootcomponent控制，它在顶部显示页眉和页脚以及一些内容。因此根组件的html可能看起来像：



<div>some header info</div>
<router-outlet></router-outlet>
<div>some footer info</div>

<div>some header info</div> <router-outlet></router-outlet> <div>some footer info</div> 路由模块应如下所示：

将模块注入到您的根模块中。 const routes: Routes = [{ path: '/home', component: RootComponent, children: [ { path: '/login', component: AppComponent, }, { path: '/registration', component: RegisterComponent, } ] } @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], }) export myRouteModule;

@NgModule({
  declarations: [
    RootComponent,
    AppComponent,
    registerComponent,
  ],
  imports: [
    myRoutModule
   ]
})

页面的中间内容由当前路由动态控制。如果网址为/ home / login，则将显示应用程序视图。对于/ home / registration，将改为显示register组件。

希望这会有所帮助。

角度布线：更换组件

1 个答案: