如何正确进行角度布线

提问者：小点点

如何正确进行角度布线

我正在使用Angular最新版本和springboot开发一个web应用程序，用于学习目的。

我现在面临一个奇怪的问题。我正确地执行了路由，http://localhost:4200导航到主页，而当http://localhost:4200/bookings导航到booking组件时。但是在那个booking组件中，我创建了一个表单并添加了css样式。路由工作得很好。但是后来我添加了

required[(ngModel)]=""

现在的问题是当我键入http://localhost:4200/bookings时，它不会导航到booking组件，而是返回home组件，而不加载booking组件。如果我从每个输入字段中删除required[(ngModel)]=“”part，那么路由工作正常，http://localhost:4200/bookings将返回booking表单。我目前陷入了这个问题，请帮助我解决。为什么在每个输入字段中添加required[(ngModel)]=“”part会影响路由？。

导航栏

nav role="navigation">
    <ul>
      <li><a routerLink="home">HOME</a></li>
      <li><a href="#">PLAN AND BOOK</a>
        <ul class="dropdown">
          <li><a routerLink="bookings" routerLinkActive="active">Manage My Booking</a></li>
          <li><a href="#">Check-In Online</a></li>
          <li><a href="#">Flight Status</a></li>
        </ul>
      </li>
      <li><a href="#">FLYINGWINGS</a></li>
      <li><a href="#">HOLIDAYS</a></li>
    </ul>
</nav>

路由文件

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'bookings', component: BookingComponent },
  { path: 'home', component: HomeComponent }
];

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

booking.component.html文件

<form (ngSubmit)="save()">     
<table style="width: 100%;">
    <tbody>
    <tr style="height: 74px;">
        <td style="height: 74px; width: 14%;">&nbsp;</td>
        <td style="height: 74px; width: 3%;">&nbsp;</td>
        <td style="height: 74px; width: 17%;">&nbsp;</td>
        <td style="height: 74px; width: 3%;">&nbsp;</td>
        <td style="height: 74px; width: 18%;">&nbsp;</td>
        <td style="height: 74px; width: 3%;">&nbsp;</td>
        <td style="height: 74px; width: 18%;">&nbsp;</td>
    </tr>
    <tr style="height: 39px;">
        <td style="height: 39px; width: 14%;">
            <div class="input-group">
            <div class="input-group-prepend">
            <div class="input-group-text">From</div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Departure Airport" required[(ngModel)]="booking.departure">
            </div>
        </td>
    
        <td style="height: 39px; width: 3%;">&nbsp;</td>
    
        <td style="height: 39px; width: 17%;"> 
            <div class="input-group">
            <div class="input-group-prepend">
            <div class="input-group-text">To</div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Arival Airport" required[(ngModel)]="booking.arrival" >
            </div>
        </td>
    
        <td style="height: 39px; width: 3%;">&nbsp;</td>
    
        <td style="height: 39px; width: 18%;"> 
            <div class="input-group">
            <div class="input-group-prepend">
            <div class="input-group-text">Depart</div>
            </div>
            <ejs-datetimepicker id='datetimepicker' placeholder='Select a date' [value]='dateValue' [min]='minDate' [max]='maxDate' required[(ngModel)]="booking.departd"></ejs-datetimepicker>
            </div>
        </td>
    
        <td style="height: 39px; width: 3%;">&nbsp;</td>
    
        <td style="height: 39px; width: 18%;">
            <div class="input-group">
            <div class="input-group-prepend">
            <div class="input-group-text">Return</div>
            </div>
            <ejs-datetimepicker id='datetimepicker' placeholder='Select a date' [value]='dateValue' [min]='minDate' [max]='maxDate' required[(ngModel)]="booking.returnd"></ejs-datetimepicker>
            </div>
        </td>
    </tr>
    
    <tr style="height: 39px;">
        <td style="height: 39px; width: 14%;">&nbsp;</td>
        <td style="height: 39px; width: 3%;">&nbsp;</td>
        <td style="height: 39px; width: 17%;">&nbsp;</td>
        <td style="height: 39px; width: 3%;">&nbsp;</td>
        <td style="height: 39px; width: 18%;">&nbsp;</td>
        <td style="height: 39px; width: 3%;">&nbsp;</td>
        <td style="height: 39px; width: 18%;">&nbsp;</td>
    </tr>
    
    
    <tr style="height: 39px;">
    <td style="height: 39px; width: 14%;"> 
        <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Class</div>
        </div>
       <select class="form-control" required[(ngModel)]="booking.class">
        <option>Economy</option>
        <option>Business</option>
       </select>
       </div>
    </td>
    
    <td style="height: 39px; width: 3%;">&nbsp;</td>
    
    <td style="height: 39px; width: 17%;">
        <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Adults</div>
        </div>
       <select class="form-control" required[(ngModel)]="booking.adults">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
      </select>
      </div>
    </td>
    
    <td style="height: 39px; width: 3%;">&nbsp;</td>
    
    <td style="height: 39px; width: 18%;">
        <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Children</div>
        </div>
       <select class="form-control" required[(ngModel)]="booking.children">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
      </select>
      </div>
    </td>
    
    <td style="height: 39px; width: 3%;">&nbsp;</td>
    
    <td style="height: 39px; width: 18%;">
        <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">Infants</div>
        </div>
       <select class="form-control" required[(ngModel)]="booking.infants" >
           
        <option>0</option>
        <option>1</option>
       </select>
         </div>
    </td>
    </tr>
    
    <tr style="height: 32px;">
    <td style="height: 32px; width: 14%;"></td>
    <td style="height: 32px; width: 3%;">&nbsp;</td>
    <td style="height: 32px; width: 17%;">&nbsp;</td>
    <td style="height: 32px; width: 3%;">&nbsp;</td>
    <td style="height: 32px; width: 18%;">&nbsp;</td>
    <td style="height: 32px; width: 3%;">&nbsp;</td>
    <td style="height: 32px; width: 18%;">&nbsp;</td>
    </tr>
    <tr style="height: 32px;">
        <td style="height: 32px; width: 14%;"><button type="submit" class="btn btn-success">Search</button>
        </td>
        <td style="height: 32px; width: 3%;">&nbsp;</td>
        <td style="height: 32px; width: 17%;">&nbsp;</td>
        <td style="height: 32px; width: 3%;">&nbsp;</td>
        <td style="height: 32px; width: 18%;">&nbsp;</td>
        <td style="height: 32px; width: 3%;">&nbsp;</td>
        <td style="height: 32px; width: 18%;">&nbsp;</td>
        </tr>
    </tbody>
    </table>
</form>

Booking.Component.ts

export class BookingComponent implements OnInit {
  public minDate: Date = new Date ("01/01/2000 00:00 AM");
  public maxDate: Date = new Date ("01/01/2050 00:00 AM");
  public dateValue: Date = new Date ("01/01/2015 00:00 AM");

  booking:Bookings =new Bookings();
 


  constructor(private flightService:FlightService, private router: Router) { }

  

  ngOnInit(): void {
  }

  save() {
    this.flightService.search(this.booking)
      .subscribe(data => console.log(data), error => console.log(error));
    this.booking = new Bookings();
    this.gotoList();
  }

  gotoList() {
    this.router.navigate(['/home']);
  }

}

app.module.ts文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BookingComponent } from './booking/booking.component';
import { HeaderComponent } from './header/header.component';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import {HttpClientModule} from '@angular/common/http';
import { FooterComponent } from './footer/footer.component'
import { DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';


@NgModule({
  declarations: [
    AppComponent,
    BookingComponent,
    HeaderComponent,
    HomeComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DateTimePickerModule,
    HttpClientModule,
    CarouselModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮帮我。谢谢。

共1个答案

匿名用户

这样试试看

<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Arival Airport" required (ngModel)="booking.arrival" >