如何将数据从组件发送到模块？答案

【问题标题】：How send data from a component to a Module?如何将数据从组件发送到模块？
【发布时间】：2019-05-29 13:15:31
【问题描述】：

我有一个组件，其中有flagPerfil 变量，我需要将此变量发送到我的模块。

我的服务

export class ListUserService {
    public flagPerfil = boolean;
    changeFlagPerfil() {
        console.log('EEE' + this.flagPerfil);
        this.flagPerfil ? this.flagPerfil = false : this.flagPerfil = true;
    }

组件类：

@Component({
    selector: 'app-list-user',
    templateUrl: './list-user.component.html',
    styleUrls: ['./list-user.component.scss'],
    providers: [ListUserService]
})
export class ListUserComponent implements OnInit {
    private flagPerfil = false;

    getFlag() {
        return this.flagPerfil;
    }

这是视图 list-user.component.html

<span *ngIf="!flagPerfil">
  <input type="button" id="usuarios" name="more" (click)="changeFlagPerfil()"
    value="Amigos">
</span>

我有一个模块，我想在模块中注入服务，因为我需要FlagProfile 变量

  @NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        RouterModule.forChild([{path: '', component: Tab1Page}])
    ],
    declarations: [Tab1Page, ListUserComponent, FriendsComponent]
})
export class Tab1PageModule {
    public flagPerfil: boolean;

    constructor(private listUserService: ListUserService) {
        this.flagPerfil = listUserService.flagPerfil;
        console.log('FLAG', listUserService.flagPerfil);
    }
}

如何使用事件 Emit？

我需要模块自动听到那个变量的变化

【问题讨论】：

不要使用服务等模块。我不明白为什么需要在构造函数中完成。
@Reactgular 我需要使用模块，我需要 flagPerfil 的值
@Reactgular 我不将模块用作服务，我有组件的服务

标签： angular angular-services

【解决方案1】：

export class ListUserService {
    public flag$ = new Subject< boolean >();

}


export class Tab1PageModule {
    public flagPerfil: boolean;

    constructor(private listUserService: ListUserService) {
        listUserService.$flags.subscribe((flag)=>{
           console.log('FLAG', flag;
           this.flagPerfil = flag;
      });

    }
}


export class ListUserComponent implements OnInit {
    private flagPerfil = false;

    getFlag() {
        return this.flagPerfil;
    }


    constructor(private listUserService: ListUserService) {

    }
    functionThatGetsCalledWhenTheFlagIsChanged(){
       this.listUserService.flags$.next(this.flagPerfil);

     }

}

【讨论】：

我什么时候使用ThatGetsCalledWhenTheFlagIsChanged这个函数？
flagPerfil 是布尔值
我收到此错误错误 TS2322：类型“假”不可分配给类型“主题”。
@yaha 你是认真的吗？

【解决方案2】：

您可以将类型传递给主题，如 this 主题教程中所示，例如= new Subject<boolean>();

here提出了类似的问题

更新：我修复了阻止 <boolean> 显示的格式

【讨论】：