Question

我正在尝试导入一个功能，以便从导航栏中的按钮添加新书。当我点击按钮时，我看到网址更改为localhost:4200/addNewBook只需一微秒，然后又返回localhost:4200。

我也尝试过路由功能，但我不知道为什么它不起作用。如果我手动输入地址，它会打开页面，但我希望它在单击按钮后工作。我也创建了一个名为book的课程。

使用浏览器调试器时出现以下运行时错误：

以下是我的代码片段：

Add-new-book-component.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() {
  }

}

Add-new-book-component.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 &amp; Literature">Arts &amp; 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>&nbsp;ounces&nbsp;
                </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">
                    &nbsp;
                    <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 &nbsp;
            <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>

Nav-bar-component.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>

App.routing.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);

Answer 1

在app.module.ts文件中，导入BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

还将BrowserAnimationsModule添加到导入数组

@NgModule({
  imports: [
    BrowserAnimationsModule,

Answer 2

我没有足够的声誉对此发表评论。您可以使用this.router.navigate(['/addNewBook']);然后使用window.location.reload(true); 在按钮单击事件内，从一个路径导航到另一个路径。

按钮路由在Angular 2中不起作用

2 个答案: