如何將數據從組件發送到模塊？

Question

我有一個組件，我有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？

我需要模塊自動聽到該變量的變化

Answer 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);

     }

}

Answer 2

您可以將類型傳遞給Subject，如本教程中針對Subject所示，例如= new Subject<boolean>();

這里也提出了類似的問題

更新：我修復了格式化，這阻止了<boolean>顯示