我正在尝试从导航栏中的按钮导入添加新书的功能。发生的事情是，当我单击该按钮时，我看到 url 更改为 localhost:4200/addNewBook 仅一微秒，然后它返回到 localhost:4200。
我也试过路由功能，但我不知道为什么它不起作用。 如果我手动输入地址，它会打开页面，但我希望它在单击按钮后工作。 我也创建了一个名为 book 的类。
当我使用浏览器调试器时出现以下运行时错误:
这是我的代码片段:
添加新书组件.ts :
import { Component, OnInit } from '@angular/core';
import { Book } from '../../models/book';
@Component({
selector: 'app-add-new-book',
templateUrl: './add-new-book.component.html',
styleUrls: ['./add-new-book.component.css']
})
export class AddNewBookComponent implements OnInit {
private newBook: Book = new Book();
private bookAdded: boolean;
constructor() { }
ngOnInit() {
}
}
添加新书组件.html :
<div class="container">
<div [hidden]="bookAdded">
<h3 style="margin-top: 30px;">New Book Information <span style="font-size:small">* is a required field</span></h3>
<form (ngSubmit)="onSubmit()">
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="4" [rowspan]="1">
<md-input-container>
<input mdInput id="title" type="text" required [(ngModel)]="newBook.title" name="title" placeholder="Title">
</md-input-container>
</md-grid-tile>
</md-grid-list>
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="author" type="text" required [(ngModel)]="newBook.author" name="author" placeholder="Author">
</md-input-container>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="publisher" type="text" required [(ngModel)]="newBook.publisher" name="publisher" placeholder="Publisher">
</md-input-container>
</md-grid-tile>
</md-grid-list>
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="4" [rowspan]="1">
<md-input-container>
<input mdInput id="publicationDate" type="date" required [(ngModel)]="newBook.publicationDate" name="publicationDate" placeholder="PublicationDate">
</md-input-container>
</md-grid-tile>
</md-grid-list>
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-select placeholder="Category" id="category" name="category" [(ngModel)]="newBook.category">
<md-option value="Management">Management</md-option>
<md-option value="Fiction">Fiction</md-option>
<md-option value="Engineering">Engineering</md-option>
<md-option value="Programming">Programming</md-option>
<md-option value="Arts & Literature">Arts & Literature</md-option>
</md-select>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-select placeholder="Format" id="format" name="format" [(ngModel)]="newBook.format">
<md-option value="paperback">Paperback</md-option>
<md-option value="hardcover">Hardcover</md-option>
</md-select>
</md-grid-tile>
</md-grid-list>
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="pageNumber" type="number" [(ngModel)]="newBook.numberOfPages" name="numberOfPages" step="1" placeholder="Number of Pages">
</md-input-container>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="isbn" type="text" required [(ngModel)]="newBook.isbn" name="isbn" placeholder="ISBN">
</md-input-container>
</md-grid-tile>
</md-grid-list>
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="listPrice" type="number" [(ngModel)]="newBook.listPrice" name="listPrice" step="0.01" placeholder="List Price">
</md-input-container>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="ourPrice" type="number" [(ngModel)]="newBook.ourPrice" name="ourPrice" step="0.01" placeholder="Our Price">
</md-input-container>
</md-grid-tile>
</md-grid-list>
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="shippingWeight" type="number" [(ngModel)]="newBook.shippingWeight" name="shippingWeight" step="0.01" placeholder="Shipping Weight">
</md-input-container> ounces
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-select placeholder="Language" id="language" name="language" [(ngModel)]="newBook.language">
<md-option value="english">English</md-option>
<md-option value="spanish">Spanish</md-option>
</md-select>
</md-grid-tile>
</md-grid-list>
<md-grid-list cols="4" rowHeight="60px">
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-input-container>
<input mdInput id="inStockNumber" type="number" [(ngModel)]="newBook.inStockNumber" name="inStockNumber" step="0.01" placeholder="Numbers In Stock">
</md-input-container>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<md-slide-toggle [color]="color" [checked]="checked" [disabled]="disabled" [(ngModel)]="newBook.active" name="active">Active</md-slide-toggle>
</md-grid-tile>
</md-grid-list>
<md-input-container>
<textarea mdInput id="description" [(ngModel)]="newBook.description" name="description" placeholder="Description" required></textarea>
</md-input-container>
Image
<input id="tile" type="file" id="bookImage" name="bookImage" (change)="uploadImageService.fileChangeEvent($event)">
<br><br>
<md-grid-list cols="20" rowHeight="60px">
<md-grid-tile [colspan]="2" [rowspan]="1">
<button class="mat-primary" md-raised-button type="submit">Add Book</button>
</md-grid-tile>
<md-grid-tile [colspan]="2" [rowspan]="1">
<a class="mat-warn" md-raised-button routerLink="/">Cancel</a>
</md-grid-tile>
</md-grid-list>
</form>
</div>
<div class="row" [hidden]="!bookAdded"
>
<h3>Book added successfully!</h3>
</div>
</div>
导航栏组件.html :
<md-toolbar class="mat-primary">
<h3 [style.color]="'white'">ADMIN PORTAL</h3>
<span class="example-spacer"></span>
<span [hidden]="!loggedIn"><a md-button>View Book List</a></span>
<span [hidden]="!loggedIn"><a md-button routerLink="/addNewBook">Add a Book</a></span>
<span [hidden]="!loggedIn"><a md-button (click)="logout()">Logout</a></span>
</md-toolbar>
应用程序路由.ts:
import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {LoginComponent} from './components/login/login.component';
import {AddNewBookComponent} from './components/add-new-book/add-new-book.component';
const appRoutes: Routes = [
{
path : '',
redirectTo: '/login',
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{
path: 'addNewBook',
component: AddNewBookComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
最佳答案
在您的 app.module.ts 文件中，导入 BrowserAnimationsModule
从'@angular/platform-browser/animations'导入{BrowserAnimationsModule}；
同时将 BrowserAnimationsModule 添加到 imports 数组中
@NgModule({
imports: [
BrowserAnimationsModule,
关于javascript - 按钮路由在 Angular 2 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44507907/