无法在Angular 4中使用对象

时间:2018-01-18 06:58:08

标签: angular typescript

我已将用户定义的类型定义为Book.model.ts,我想在许多组件中使用它。但是当我使用它时,它会给我一个错误,

compiler.js:466 Uncaught Error: Can't resolve all parameters for BooksComponent: (?).
    at syntaxError (compiler.js:466)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15547)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15382)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:14890)
    at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14745)
    at eval (compiler.js:33508)
    at Array.forEach (<anonymous>)
    at eval (compiler.js:33507)
    at Array.forEach (<anonymous>)
    at JitCompiler._loadModules (compiler.js:33504)

My Book模型就像,

export class Book {

    public Name : string;
    public Genre:string;
    public Author:string;
    public Likes: number;
    public Detail:string;
    public IsAvailable:boolean;
    public ReleaseDate:string;

}

Book.component.ts就像,

import { Component ,ViewChild } from '@angular/core';
import {Book}  from "../models/book.model";
import {DetailComponent} from "../detail/detail.component"
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
import { BookService } from '../serives/book.service';


@Component({
  selector: 'books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css']
})

export class BooksComponent implements OnInit {

    public myLibrary:Array<Book>;

    public currentAddedBook:Book;

    constructor(private BookService: BookService){

    }

        ngOnInit(){
            this.BookService.bookSourceMessage.subscribe(bookDetail=>this.currentAddedBook=bookDetail)

            console.log(this.currentAddedBook);
        }    


public books:Book[];

public tempBook:Book;

populate(){
    this.tempBook=new Book();
    this.tempBook.Name="First book";
    this.tempBook.Genre="Action";
    this.tempBook.Author="Vivek Verma";
    this.tempBook.Likes=59;
    this.tempBook.Detail="Awesome boook",
    this.tempBook.IsAvailable=false;
    this.tempBook.ReleaseDate="20 Feb";
    this.books.push( this.tempBook)
    this.tempBook=new Book();

    this.tempBook.Name="Second book";
    this.tempBook.Genre="Action";
    this.tempBook.Author="Vivek Verma";
    this.tempBook.Likes=59;
    this.tempBook.Detail="Awesome boook",
    this.tempBook.IsAvailable=false;
    this.tempBook.ReleaseDate="20 Feb";
    this.books.push( this.tempBook)
    this.tempBook=new Book();

    this.tempBook.Name="Third book";
    this.tempBook.Genre="Action";
    this.tempBook.Author="Vivek Verma";
    this.tempBook.Likes=59;
    this.tempBook.Detail="Awesome boook",
    this.tempBook.IsAvailable=false;
    this.tempBook.ReleaseDate="20 Feb";
    this.books.push( this.tempBook)
    this.tempBook=new Book();
}

@ViewChild(DetailComponent) detailComponent:DetailComponent

    enableDetailPage(book:Book){
        this.detailComponent.showDetail(book);
    }

}

图书服务:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import {Book}  from "../models/book.model";

@Injectable()
export class BookService{

    public book:Book;

    private bookSource = new BehaviorSubject<Book>(this.book);
    bookSourceMessage =this.bookSource.asObservable();

    constructor(){}

    onBookIssue(book:Book){

        this.bookSource.next(book);

    }
}

在编辑器中它没有显示任何错误,webpack也编译它但在浏览器中我得到错误。我是TypeScript.Please帮助的新手。

0 个答案:

没有答案