angular - 从 Angular 4 中的另一个组件访问组件方法

Question

我有一个仪表板组件、一个 head 组件和一个 userOverview 组件。

仪表板组件.ts文件

export class DashboardComponent implements OnInit {
    startTour() {
      // do something
    }
}

userOverview组件.ts文件

export class UserOverviewComponent implements OnInit {
    startTour() {
      // do something else
    }
}

header 组件.html 文件

<button (click)="openTour()"></button>

header 组件.ts文件

export class HeaderComponent implements OnInit {
    openTour() {
                   // In here, I want to ask is there any way I could make a 
                   // call to  different component with the same method same.

      this.name = componentName // The component Name, such as
                                // DashboardComponent, UserOverviewComponent

      this.name.startTour(); // Something like this
    }
}

现在我可以在导航到不同的组件时获取 this.name，但我知道使用 this.name.startTour() 肯定行不通。

感谢您提供任何提示或解决方案。

Answer 1

如果组件是独立的，您不能就这样调用。如果组件1和组件2是兄弟，您可以使用 EventEmitter @Input

您还可以使用带有主题的共享服务。 Angular 中的服务是单例的，这意味着它作为单个实例进行管理。因此，如果每个组件都访问该服务，它们将访问相同的共享数据。