ボタンのルーティングが角2で機能していません

Question

ナビゲーションバーのボタンから新しいブックを追加する機能をインポートしようとしています。何が起こるかは、ボタンをクリックするとURLがlocalhost:4200/addNewBookにちょうど1マイクロ秒間変わったのを確認してからlocalhost:4200に戻ります。

私はルーティング機能も試しましたが、なぜ動作しないのかわかりません。 アドレスを手動で入力すると、ページが開きますが、ボタンをクリックしても機能します。 私は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() { 
    } 

} 

追加します-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-compo nent.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

、輸入BrowserAnimationsModule

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

また、ランタイムエラーがどこかにあなたのコード内で発生した場合、これが発生する可能性が

@NgModule({ 
    imports: [ 
    BrowserAnimationsModule, 

Answer 2

私はこれについてコメントするのに十分な評判を持っていけません。ボタンのクリックイベント内でthis.router.navigate(['/addNewBook']);を使用してwindow.location.reload(true);を使用して、あるルートから別のルートにナビゲートすることができます。あなたのapp.module.tsファイルで