Question

我正在一个组件 (Component1) 中加载另一个包含表单的独立组件 (Component2)。

假设您制作了一个表单组件，我想将其集成到我的组件中并触发您编写的提交功能，而无需单击您的提交按钮。

这个表单上的提交按钮会触发一个保存数据的函数：

submitData(newUserForm: NgForm)

主要组件（Component1）也有一个提交按钮。我想要的是从 Component2 中删除提交按钮并在我从 Component1 中单击提交时触发提交功能。

类似于：

<button type="button" class="submit" (click)="saveData()">{{ Save }}</button>

saveData() {
     Component2.submitData(data);
}

ViewChild 不起作用，因为这两个组件不是同一组件的一部分。此外，输出将不起作用。

从 Component2 外部调用该函数有哪些选项？

希望能帮到你。

谢谢。

问候， AG

Answer 1

在没有太多上下文的情况下，我认为您需要一项服务来执行此操作。如果这两个组件之间没有关系，为什么要从组件 2 调用函数？将保存逻辑放入服务并将其注入到您需要的任何组件上。

Answer 2

在这里使用服务

SomeService

private value: Subject<string> = new Subject<string>();

// return the Subject as an Observable in order to be able to subscribe to it
public get theValue(): Observable<string> {
    return this.value.asObservable();
}

// set the current value
public set theValue(value: string) {
    this.value.next(value);
}

组件 2 TS

constructor(private someService: SomeService){

}

ngOnInit(): void {
    // subscribe to the value and refresh the local variable whenever it changes
    this.someService.theValue.subscribe( value => {
        console.log('Info from Component 1: ' + value;

        if (value === 'Saved') {
            Component2.submitData(data);
        }
    });
}

组件 1 TS

constructor(private someService: SomeService){
}

saveData(): void {
    this.someService.theValue = 'Saved';
}

Answer 3

这是关于组件交互，您需要使用服务在两个不同的组件之间进行通信。主要是Angular的依赖注入。

您只需使用主题即可。

Angular2 - 从另一个独立组件调用函数。基本上，从外部组件调用函数

3 个答案: