如何从应用组件调用其他模块组件功能答案

【问题标题】：How to call other module component function from app component如何从应用组件调用其他模块组件功能
【发布时间】：2018-04-15 20:36:21
【问题描述】：

我的应用程序有应用程序模块和仪表板模块，仪表板模块有很多组件。我必须从应用组件触发仪表板组件功能（changedivStatus）。

我希望这可以通过 EventEmitter 的服务通过发射和订阅来实现。

有没有其他没有服务的方式。

app.module.ts

import { NgModule }                     from '@angular/core';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { BrowserModule }                from '@angular/platform-browser';
import {BrowserAnimationsModule,NoopAnimationsModule}       from '@angular/platform-browser/animations';
import { DashboardModule }              from './dashboard/dashboard.module';

dashboard.module.ts

import { NgModule }               from '@angular/core';
import { BrowserModule }          from '@angular/platform-browser';
import { RouterModule }         from '@angular/router';
import { WidgetsModule }          from '../widgets/widgets.module';
import { SharedModule }          from '../shared/shared.module';
import { DashboardComponent }     from './dashboard/dashboard.component';
import { AppSelectorComponent }   from './app-selector/app-selector.component';
import { AppReportsComponent }   from './app-reports/app-reports.component';
import {AppReportsService} from '../shared/services/app-reports.service';
import { BsDropdownModule }   from 'ngx-bootstrap/dropdown';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSidenavModule,MatDatepickerModule} from '@angular/material';
import {CheckboxModule} from 'primeng/primeng';
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        BrowserModule,
        SharedModule,
        WidgetsModule,
        BsDropdownModule,
        RouterModule,
        FormsModule,
        CheckboxModule,
        BrowserAnimationsModule,
        MatSidenavModule,
        MatDatepickerModule
    ],
    declarations: [
        DashboardComponent,
        AppSelectorComponent,
        AppReportsComponent
    ],
    providers: [
        AppReportsService
    ],
    exports: [
        DashboardComponent
    ]
})

export class DashboardModule {

}

app.component.html

<div class="reports_container fRight" *ngIf="!firstVisit">
    <input type="checkbox" (click)="changedivStatus()" class="md-primary" [checked]="showReport" />
    <span style="font-size: 12px">Hide Banner</span>
</div>

dashborad.component.html

<div class="row">
<div class="col-md-12 col-sm-12 col-lg-12">
    <app-app-reports [items]="apps" *ngIf="loadReport"></app-app-reports>
</div>
</div>

dashboard.component.ts

changedivStatus() {
        this.showReport = !this.showReport;
        if(!this.showReport) {
            this.loadReport = true;
        } else {
            this.loadReport = false;
        }
    }

【问题讨论】：

你为什么不想为此使用服务？
请注意，这里不要使用'angularjs'，这是angular的第一次迭代，与Angular 2+（标记为'angular'）有很大不同
我也必须在应用模块中包含服务，以避免仅使用组件尝试包含服务。

标签： angular

【解决方案1】：

您可以（并且应该）使用服务来做到这一点，方法是将您的changeDivStatus() 函数放在dashboard.service 中，从您的app.component 触发它，从您的dashboard.service 发出事件并订阅此事件你的 dashboard.component ngOnInit 函数。

这是服务的官方角度指南：https://angular.io/tutorial/toh-pt4

【讨论】：