角选路:更换部件
我正在为我自己的学习做一个项目，并且坚持这个简单的问题。我有第一个/主页作为登录/注册页面。现在，我希望使用路由将页面替换为其他组件。当我单击“寄存器”时，我只想看到注册表组件。我有自己的entry.routing模块条目，有三个组件登录组件、注册组件和注册表单组件。在第一页，我查看登录和注册组件，他们的指令在app组件的html中查看它们。如何将表单app.component更改为在视图中注册-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中，它就会在相同的视图上显示寄存器表单组件，而路由器出口就在这个视图中。
回答 1
Stack Overflow用户
发布于 2018-06-19 20:03:35
定义路由模块，其中定义url及其子url。在模块中，为寄存器组件创建一个父组件。假设您的主页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/登录，则将显示app视图。对于/home/注册，将显示寄存器组件。
希望这能帮上忙。
https://stackoverflow.com/questions/50935243
复制相似问题
腾讯云开发者
