组件的调用方法Angular 2/4

Question

我试图在另一个组件中使用某个组件的方法，但是我得到像xxComponent没有提供程序的错误。 我该怎么办？

import { FoldersService } from '../../_services/folders.service'; 
import { Component, OnInit, ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'app-folder-create', 
    templateUrl: './folder-create.component.html', 
}) 
export class FolderCreateComponent implements OnInit { 
    constructor(
    private http: Http, 
    private folderService: FoldersService, 
) { } 

    ngOnInit() { } 

    saveFolder() { 

    } 
} 

-- Class FolderEditComponent 
    import { FolderCreateComponent } from '../folder-create/folder-create.component'; 
@Component({ 
    selector: 'app-folder-edit', 
    templateUrl: './folder-edit.component.html', 
    styleUrls: ['./folder-edit.component.css'], 
}) 
export class FolderEditComponent implements OnInit { 
    constructor(
    private http: Http, 
    private folderService: FoldersService, 
    private folderCreate: FolderCreateComponent 
) { } 

    ngOnInit() { } 

    // How can I do here for calling method saveFolder() of the component FolderCreateComponent 

    // I try this : 
    folderCreate.saveFolder(); // But I got error : ERROR Error: Uncaught (in promise): Error: No provider for FolderCreateComponent! 

} 

我如何在组件调用FolderEditComponent方法saveFolder（）组件FolderCreateComponent的呢？

Answer 1

情况下，1 - 当您要访问的子组件的方法，然后在父组件 -

@ViewChild(ChildComponent) childComponent: ChildComponent; 

childComponent.methodName(); 

案例2 - 当您想要访问父母方法 -

构造（@注入（forwardRef（（）=>为父级））私人_parent：为父级）{}

只使用this._parent.methodName()

Answer 2

您需要在组件中的服务添加到使用的供应商：

@Component({ 
    selector: 'app-folder-create', 
    templateUrl: './folder-create.component.html', 
    providers: [FoldersService] 
}) 

此外，您还需要以使用内另一个组件与import {FooComponent} from '/path/to/foo.component';导入的组件。

编辑：

import {FolderCreateComponent} from 'path/to/component'; 

export class FolderEditComponent implements OnInit { 

    constructor(private folderCreate: FolderCreateComponent) { 
    } 

    foo() { this.folderCreate.saveFolder(); } 
} 

Answer 3

添加提供程序，如下图所示为FolderCreateComponent

import { FoldersService } from '../../_services/folders.service'; 
import { Component, OnInit, ViewChild } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

@Component({ 
    selector: 'app-folder-create', 
    templateUrl: './folder-create.component.html', 
    providers: [FoldersService] 
}) 
export class FolderCreateComponent implements OnInit { 
    constructor(
    private http: Http, 
    private folderService: FoldersService, 
) { } 

    ngOnInit() { } 

    saveFolder() { 

    } 
}