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

Question

I am trying to import a functionality to add a new book from the button in the navigation bar. What happens is that when I click the button, I see the url change to localhost:4200/addNewBook for just a microsecond and then it goes back to localhost:4200 .

I've tried the routing functionality as well but I don't know why it doesn't work. If I manually type the address, it opens the page, but I want it to work after clicking the button. I've created a class called book too.

The following runtime errors occur when I use the browser debugger :

Here are snippets of my code :

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

In your app.module.ts file, import BrowserAnimationsModule

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

Also add BrowserAnimationsModule to the imports array

@NgModule({
  imports: [
    BrowserAnimationsModule,

Answer 2

I dont have enough reputation to comment on this. You can use this.router.navigate(['/addNewBook']); and then window.location.reload(true); inside the button click event to navigate from one route to another.