Angular 2 - Typescript Basic Test-Database Class

时间:2017-07-27 04:06:53

标签: javascript angular class typescript

我正在学习Angular 2并使用沙盒项目,并且想知道如何在另一个类中使用类,就像在Java或其他OOP语言中一样。

如果我有类MockDatabase,那么:

export class MockDatabase {


constructor(private list: Restaurant[]){
    this.list.push({ id: 1, name: "Chinese", tags: ["Chinese"] });
    this.list.push({ id: 2, name: "Mexican", tags: ["Mexican"] });
    this.list.push({ id: 3, name: "Italian", tags: ["Italian"] });
    this.list.push({ id: 4, name: "American", tags: ["American"] });

}

getList(): Restaurant[] {
    return this.list;
}
}

我希望在服务类中使用该类,如下所示:

@Injectable()
export class RestaurantsService {


constructor(private db: MockDatabase){

}

getAllRestaurants(): Restaurant[] {
    return this.db.getList();
}


}

然后在此组件中使用:

@Component({
  selector: 'restaurants',
  templateUrl: 'restaurants.html',
  providers: [RestaurantsService, PreferencesFilterService]
})
export class RestaurantsComponent implements OnInit{

restaurants: Restaurant[];

constructor(
  private restaurantsService: RestaurantsService,
  private preferencesFilterService: PreferencesFilterService
) {}

ngOnInit(): void {
  this.restaurants = this.restaurantsService.getAllRestaurants();
}

filterRestaurants(): void {
  this.restaurants = this.preferencesFilterService.getFilteredRestaurants();
}

我收到一条错误,说“没有MockDatabase的提供者”,但是如果我将它作为提供者添加到RestaurantsComponent,我会收到另一个错误,说“没有提供者对于Array()”,所以我觉得我在这里做错了。

我相信我可能会对你在Angular 2中设计这样的东西的方式有一个根本的误解,因为我对整个网络开发都很陌生。

任何有关正确方向的帮助或指示都会非常感激,因为我无法在线找到好的资源。非常感谢你的时间。

1 个答案:

答案 0 :(得分:0)

所以我在玩了一会儿后解决了这个问题。我意识到在构造函数中有一个私有字段意味着它被注入,所以我必须将它声明为类中的常规实例变量。对于那些对类似问题感到困惑的人来说,这就是现在的一切。

export class MockDatabase {
private list: Restaurant[]

constructor(){
    this.list = new Array();
    this.list.push({ id: 1, name: "Chinese", tags: ["Chinese"] });
    this.list.push({ id: 2, name: "Mexican", tags: ["Mexican"] });
    this.list.push({ id: 3, name: "Italian", tags: ["Italian"] });
    this.list.push({ id: 4, name: "American", tags: ["American"] });

}

getList(): Restaurant[] {
    return this.list;
}
}

@Injectable()
export class RestaurantsService {
private db: MockDatabase;

constructor(){
    this.db = new MockDatabase();
}

getAllRestaurants(): Restaurant[] {
    return this.db.getList();
}


}

RestaurantsComponent类仍然相同。