Question

我正在尝试制作两个角度组件，我想从第二个组件中的第一个组件调用一个函数。当我尝试这个时，我收到以下错误消息：Cannot red property 'functionName' of undefined。怎么解决这个问题？

这是一个示例的链接：https://stackblitz.com/edit/angular-rre4gb

Answer 1

那是因为要调用其功能的组件未实例化。

对于组件通信，您可以改为使用service：

服务

@Injectable()
export class MyService {
    myCustomFunction(){
    }
}

组件

组件中的

：

@Component({
   selector: 'my-component',
   providers: [ MyService ]
})
export class MyComponent {

   // inject your service to make it available
   constructor(private service: MyService){}

   doStuff(){

      // call function which is located in your service
      this.service.myCustomFunction();
   }
}

Answer 2

正如其他人所说，我希望在这些组件中使用Subject的共享服务。

<强>服务：

@Injectable()
export class SharedService  {

  mySubject = new Subject();

}

WorldComponent （订阅者）：

export class WorldComponent  {
  constructor(private sharedService: SharedService){
    this.sharedService.mySubject.subscribe((data)=>{
      this.worldFunction();
    })
  }

<强> HelloComponent （发布者）：

public helloFunction() {
    alert('Hello');
    this.sharedService.mySubject.next(true);
  }

您可以在此处找到更新的示例： https://stackblitz.com/edit/angular-rnvmkq?file=app%2Fworld.component.ts

Answer 3

在多个组件之间共享信息的最佳方式通常是通过服务。

创建一个单独的文件：file.service.ts

在app.module.ts文件中提供服务

将服务注入每个组件。然后，您可以访问两个组件中的变量

请参阅：https://angular.io/tutorial/toh-pt4

Answer 4

错误的原因是hello组件未导入，但是不应该从另一个组件调用组件，而是应该在其间使用服务，正如其他答案已经建议的那样。

Angular：来自其他组件的调用函数

4 个答案:

服务

组件