Angular Routing 清除 FormsModule 格式答案

【问题标题】：Angular Routing clears FormsModule formatingAngular Routing 清除 FormsModule 格式
【发布时间】：2020-04-11 16:45:49
【问题描述】：

我开始提供服务。我完成了主站点，并且有“服务”按钮应该重定向到登录组件。确实如此，但主要问题是使用路由和 <router-outlet> 时格式消失。

在 app.component.html 中：当我使用时：

<app-main-page></app-main-page> 
<app-login-page></app-login-page>

它以 FormsModule 格式显示主页，然后在底部显示登录组件。 screen 1 - with format
但是当我改为使用时：

<router-outlet></router-outlet>

然后我点击按钮，它会将我重定向到登录页面组件，FormsModule 格式消失。 screen 2 - without format

我认为路由模块和模块是正确的，但我不确定。

app.module.ts：

import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainPageComponent } from './main-page/main-page.component';
import { LoginPageComponent } from './login-page/login-page.component';

@NgModule({
  declarations: [
    AppComponent,
    MainPageComponent,
    LoginPageComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPageComponent } from './login-page/login-page.component';
import { MainPageComponent } from './main-page/main-page.component';


const routes: Routes = [
  { path: '',  redirectTo: '/mainpage', pathMatch: 'full' },
  { path: 'mainpage', component: MainPageComponent},
  { path: 'login', component: LoginPageComponent },

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

login-page.component.html：

<div class="container">
  <div [hidden]="submitted">
    <h1>Login Form</h1>
    <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel">
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
          Name is required
        </div>
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input type="text" class="form-control" id="password" [(ngModel)]="model.password" name="password">
      </div>

      <button type="submit" class="btn btn-success" [disabled]="!loginForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="NewPerson(); loginForm.reset()">New Person</button>
    </form>
  </div>
</div>

【问题讨论】：

标签： angular routing angular-material

【解决方案1】：

我认为你应该在 app.module.ts 中的路由模块之前导入表单模块

app.module.ts

 import { NgModule } from '@angular/core';
 import { FormsModule }   from '@angular/forms';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MainPageComponent } from './main-page/main-page.component';
 import { LoginPageComponent } from './login-page/login-page.component';

@NgModule({
declarations: [
AppComponent,
MainPageComponent,
LoginPageComponent,
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule <==
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

不。这没有帮助。