Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/oop/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Oop 如何从一个类传递值';s方法到另一个类';Typescript中的s方法?_Oop_Angular_Typescript - Fatal编程技术网

Oop 如何从一个类传递值';s方法到另一个类';Typescript中的s方法?

Oop 如何从一个类传递值';s方法到另一个类';Typescript中的s方法?,oop,angular,typescript,Oop,Angular,Typescript,我是面向对象编程的新手,我认为对于经验丰富的OO程序员来说,这应该是一个简单的概念,但我确实在努力解决这个问题 在我的Angular2应用程序中,我有一个HttpService类,如下所示: http.service.ts @Injectable() 导出类HttpService{ 构造函数(私有http:http){} addLeaf(父ID、标签、名称){ var headers=新的headers(); headers.append('Content-Type','application/

我是面向对象编程的新手,我认为对于经验丰富的OO程序员来说,这应该是一个简单的概念,但我确实在努力解决这个问题

在我的Angular2应用程序中,我有一个HttpService类,如下所示:

http.service.ts

@Injectable()
导出类HttpService{
构造函数(私有http:http){}
addLeaf(父ID、标签、名称){
var headers=新的headers();
headers.append('Content-Type','application/json');
返回此.http.post('http://localhost:8000/addleaf/', 
{'parentId':parentId,'label':label,'name':name},
{headers:headers})
.map(res=>res.subscribe();
}
我尝试从另一个类中调用此方法,如下所示:

leaf.ts

从“/http.service”导入{HttpService};
导出类叶{
名称:字符串;
...
http:http;//非常不确定这两行
私有httpService:httpService=newHttpService(this.http)
构造函数(输入){
this.name=input.name;
...
添加(){
//这里应该放什么?
this.httpservice.addLeaf(this.id、this.label、this.name);
//错误->无法读取未定义的属性“post”
}
在阅读过程中,我尝试创建HttpService类的实例,但我得到了一个错误,即post函数不存在。此外,将HttpService放入构造函数也没有运气

我在html中调用该方法,如下所示:

(click)="leaf.add()"
编辑:在@peeskillet的回答之后,我修改了leaf.ts并添加了leaf.component.ts,如图所示:

leaf.ts

导出类叶{
名称:字符串;
...
构造函数(输入){
this.name=input.name;
...
添加(){
//这里应该放什么?
}
}
leaf.component.ts

@组件({
提供者:[HttpService],
})
导出类组件{
叶:叶;
构造函数(私有httpService:httpService){
this.httpService.addLeaf(this.leaf.id、this.leaf.type、this.leaf.name)
}
}
如果我编写预定义字符串来代替参数,服务可以正常工作,但仍然不确定如何将单击的叶的参数传递给此服务。

对于Angular,我们使用and。这意味着我们不自己创建服务,而是让Angular创建服务。然后我们只需要请求服务,Angular将解决任何依赖该服务具有的密度。例如

@Injectable()
class Service {
  constructor(private http: Http) {}
}
在这里,
Service
Http
Http
中具有依赖性,这不是我们可以凭空抓住的东西。我们不能这样做

let service = new Service(new Http());
Http
还依赖于其他一些服务

class Http {
  constructor(backend: ConnectionBackend, options: RequestOptions) {} 
}
您可能认为,您可以使用
ConnectionBackend
RequestOptions

new Http(new ConnectionBackend(), new RequestOptions())`
但是您也不能这样做,因为
ConnectionBackend
也有必需的依赖项。正因为如此,我们使用控制反转。我们只是将服务添加到一个容器中,当请求服务时,角度查找服务,如它所需,
Http
,并查看
Http
需要
ConneActionBackend
RequestOptions
等,Angular将创建所有项目,在其注册表中查找所有这些项目,并将它们像这样放在一起。然后它将为我们提供完全填充的服务

因此,将我们的服务添加到容器中,我们首先需要在服务上添加
可注入的
装饰器

@Injectable()
class Service {
  constructor(private http: Http) {}
}
然后我们需要将其添加到
@NgModule.providers

@NgModule({
  imports: [ HttpModule ],
  providers: [ Service ]
})
class AppModule {}
现在,无论何时我们请求
服务
,它都将被
Http
(位于
HttpModule
中)完全填充

我们请求服务的方式是通过另一个服务或组件(指令、管道等)的构造函数

通过将
服务
类型视为构造函数参数,Angular知道在其容器中查找
服务
,然后将其传递给我们。这是依赖注入和控制反转的基础

对于
Leaf
,如果是一项服务,那么您也可以这样做

@Injectable()
class Leaf {
  constructor(private service: Service) {}
}

@NgModule({
  imports: [ HttpModule ],
  providers: [ Leaf, Service ]
})
class AppModule {}
如果您不想将
Leaf
添加为提供者,则无需添加。只需添加即可

@Component({})
class MyComponent {
  leaf: Leaf;

  constructor(private service: Service) {
    this.leaf = new Leaf(service);
  }
}

感谢您对该服务的解释,但我仍然不清楚如何将参数传递给该服务的方法我想将这些值传递给我的http服务。我认为该服务不应该是叶的成员。我认为您应该同时拥有组件的叶和服务成员。然后,当您想要发送请求时,只需从叶中获取属性并将其传递给服务方法。是的,我从叶中删除了该服务创建了一个新组件,在那里添加了服务,如果我将预定义字符串放在参数的位置,该服务可以正常工作,但我仍然不知道如何将我的参数从单击某个叶对象链接到该服务。我将编辑该问题以进行详细说明。为什么不将
leaf
传递到
httpService.addLeaf(叶)
。或者我不明白为什么将任何必需的参数传递给服务方法会如此困难。您在这方面实际遇到了什么问题。我看得很清楚。
parentId、label、name
应该来自哪里?是的,这是我的问题。parentId、label和name来自所以我的问题是:onclick应该调用什么方法?我假设它应该是我在leaf类上定义的方法。如果是,那么该方法如何调用httpService
@Component({})
class MyComponent {
  leaf: Leaf;

  constructor(private service: Service) {
    this.leaf = new Leaf(service);
  }
}