我有两个组件如下，我想从另一个组件调用一个函数。这两个组件都包含在第三个父组件using指令中。
组件1:
@component(
selector:'com1'
)
export class com1{
function1(){...}
}
组件2:
@component(
selector:'com2'
)
export class com2{
function2(){...
// i want to call function 1 from com1 here
}
}
我尝试过使用@input和@output，但我不清楚如何使用它以及如何调用该函数，有人能帮忙吗?
当前回答
对于不相关的组件，使用共享服务使用这个简单的方法。
/ / YourService
private subject = new Subject<any>();
sendClickEvent() {
this.subject.next();
}
getClickEvent(): Observable<any>{
return this.subject.asObservable();
}
}
//有按钮的组件
clickMe(){
this.YourServiceObj.sendClickEvent();
}
<button (click)="clickMe()">Click Me</button>
//你接收点击事件的组件
this.sharedService.getClickEvent().subscribe(()=>{
this.doWhateverYouWant();
}
)
其他回答
在现实世界中，场景不是调用一个简单的函数，而是调用一个具有适当值的函数。让我们深入研究一下。这就是情境 用户需要从自己的组件中触发事件，并且在结束时还希望调用另一个组件的函数。假设这两个组件的服务文件是相同的
componentOne.html
<button (click)="savePreviousWorkDetail()" data-dismiss="modal" class="btn submit-but" type="button">
Submit
</button>
当用户单击提交按钮时，他需要在自己的组件componentOne中调用savePreviousWorkDetail()。t，最后他还需要调用另一个组件的函数。为此，可以从componentOne调用服务类中的函数。ts，当它被调用时，componentTwo中的函数将被触发。
componentOne.ts
constructor(private httpservice: CommonServiceClass) {
}
savePreviousWorkDetail() {
// Things to be Executed in this function
this.httpservice.callMyMethod("Niroshan");
}
commontServiceClass.ts
import {Injectable,EventEmitter} from '@angular/core';
@Injectable()
export class CommonServiceClass{
invokeMyMethod = new EventEmitter();
constructor(private http: HttpClient) {
}
callMyMethod(params: any = 'Niroshan') {
this.invokeMyMethod.emit(params);
}
}
下面是componentTwo，它有需要从componentOne调用的函数。在ngOnInit()中，我们必须订阅被调用的方法，因此当它触发methodtobeccalled()时将被调用
componentTwo.ts
import {Observable,Subscription} from 'rxjs';
export class ComponentTwo implements OnInit {
constructor(private httpservice: CommonServiceClass) {
}
myMethodSubs: Subscription;
ngOnInit() {
this.myMethodSubs = this.httpservice.invokeMyMethod.subscribe(res => {
console.log(res);
this.methodToBeCalled();
});
methodToBeCalled(){
//what needs to done
}
}
}
使用Dataservice，我们可以从另一个组件调用该函数
Component1:我们调用该函数的组件
constructor( public bookmarkRoot: dataService ) { }
onClick(){
this.bookmarkRoot.callToggle.next( true );
}
dataservice.ts
import { Injectable } from '@angular/core';
@Injectable()
export class dataService {
callToggle = new Subject();
}
Component2:包含函数的组件
constructor( public bookmarkRoot: dataService ) {
this.bookmarkRoot.callToggle.subscribe(( data ) => {
this.closeDrawer();
} )
}
closeDrawer() {
console.log("this is called")
}
向component2(或任何具有该方法的组件)添加可注入的装饰器
@Injectable({
providedIn: 'root'
})
注入到component1 (component2方法将被调用的组件)
constructor(public comp2 : component2) { }
在component1中定义调用component2方法的方法
method1()
{
this.comp2.method2();
}
组件1和组件2代码如下。
import {Component2} from './Component2';
@Component({
selector: 'sel-comp1',
templateUrl: './comp1.html',
styleUrls: ['./comp1.scss']
})
export class Component1 implements OnInit {
show = false;
constructor(public comp2: Component2) { }
method1()
{
this.comp2.method2();
}
}
@Component({
selector: 'sel-comp2',
templateUrl: './comp2.html',
styleUrls: ['./comp2.scss']
})
export class Component2 implements OnInit {
method2()
{
alert('called comp2 method from comp1');
}
对于不相关的组件，使用共享服务使用这个简单的方法。
/ / YourService
private subject = new Subject<any>();
sendClickEvent() {
this.subject.next();
}
getClickEvent(): Observable<any>{
return this.subject.asObservable();
}
}
//有按钮的组件
clickMe(){
this.YourServiceObj.sendClickEvent();
}
<button (click)="clickMe()">Click Me</button>
//你接收点击事件的组件
this.sharedService.getClickEvent().subscribe(()=>{
this.doWhateverYouWant();
}
)
组件1(孩子):
@Component(
selector:'com1'
)
export class Component1{
function1(){...}
}
组件2(父):
@Component(
selector:'com2',
template: `<com1 #component1></com1>`
)
export class Component2{
@ViewChild("component1") component1: Component1;
function2(){
this.component1.function1();
}
}
