同时更改两个不同组件中的值Angular 2 [英] Changing a value in two different components at the same time Angular 2

问题描述

我正在使用@Input和@Output进行练习，这就是问题所在.

I am practicing with @Input and @Output and here is the issue.

在我的家庭组件中，我有以下内容:

In my home component I have the following:

<!-- Main Content -->
<div class="container">
    
    <div *ngIf="registered">
        <login></login>
    </div>
    
    <div *ngIf="!registered">
        <register></register>
    </div>
    

</div>

registered位于HomeComponent.ts

@Component({
    selector:'home',
    templateUrl:'./home.html',
})

export class HomeComponent {

    registered:Boolean = true;

}

我的目标是根据所按的内容更改home组件中的值registered.

My goal is to change the value registered in the home component depending on what is pressed.

如果在导航栏中按下寄存器，则由于home component中的值已更改，因此表格将更改为寄存器形式.但是，如果按下登录，它将返回.

If register is pressed in the navigation bar, the form will change to the register form because the value in the home component has been changed. However, if login is pressed it goes back.

我把它弄得有点复杂，但这是出于学习目的.

I made this a little more complicated but this is for learning purposes.

在目录user中，我有三个模块，Login，Register和UserService. UserService imports the components from 登录and注册and exports them. I import UserService into NavigationBar`模块.

In the directory user I have three modules, Login, Register and UserService. UserService imports the components from LoginandRegisterand exports them. I importUserServiceintoNavigationBar` module.

在home.html页面中，我想更改表格，我只是调用<nav-bar></nav-bar>

In the home.html page where I want to change the forms I just call <nav-bar></nav-bar>

@NgModule({

    imports:[
        SmartAdminModule,
        UserModule //has Login and Register components
    ],

    declarations: [NavigationBarComponent],
    exports: [NavigationBarComponent]
})
export class NavBarModule {

}

我正在尝试找到一种使用@Output或@Input的方法来解决此问题的方法.

I am trying to figure out a way to use either @Output or @Input to solve this issue.

这也在GitHub HERE 任何建议都将不胜感激.

This is also on GitHub HERE Any advice with be greatly appreciated.

----------------从这篇文章中获得一些建议后，这就是我的做法，但是仍然无法正常工作-------------- ----

----------------After some advice from this post this is how I did it but is still not working------------------

我做了一个UserService

        @Injectable()
export class UserService {

    public registered: Boolean;

    @Output() FormUpdate = new EventEmitter();

    public SetUserToRegistered(){
        this.registered = true;
        this.FormUpdate.emit(this.registered);
        
    }

    public SetUserToUnregistered(){
        this.registered = false;
        this.FormUpdate.emit(this.registered);
       
    }

}

然后我将其注入home.module.ts

@NgModule({

    imports:[
        SmartAdminModule,
        UserModule,
        NavBarModule
    ],

    exports:[HomeComponent],

    declarations: [HomeComponent],

    providers: [UserService]

})
export class HomeModule {


}

HomeComponent:

HomeComponent:

 @Component({
    selector:'home',
    templateUrl:'./home.html',
})

export class HomeComponent {

    registered: Boolean;

    constructor(private userService: UserService) {

        this.registered = this.userService.registered;
    }

    handleFormUpdate(formUpdate){
        //what to do here
    }
}

然后我有一个假的时刻，以为我会制作Login和Register按钮，并在其中注入userService，然后按下该按钮，它将更改HomeComponent中的this.registered = this.userService.registered;的值

Then I had a aha moment and thought I would make the Login and Register buttons and inject the userService in there and then that button would be pressed it would change the value of this.registered = this.userService.registered; in the HomeComponent

NavBar.html

NavBar.html

<div>
                <button (click)="showRegister()">Register</button>
                <button (click)="showLogin()">Login</button>
            </div>

NavBarComponent:

NavBarComponent:

@Component({
    selector:'nav-bar',
    templateUrl:'./navigationBar.html',
})

export class NavigationBarComponent{

    constructor (private userService: UserService) { }


    showLogin(){
        this.userService.registered = true;
    }

    showRegister(){
        this.userService.registered = false;
    }


}

home.html

home.html

<div class="container">
    
    <div *ngIf="registered">
        <login (formUpdate)="handleFormUpdate($event)"></login>
    </div>
    
    <div *ngIf="!registered">
        <register (formUpdate)="handleFormUpdate($event)"></register>
    </div>
    
</div>

但是什么也没发生.

该项目已在GitHub上更新.

The project is updated on GitHub.

推荐答案

此方法将使用输入和输出方法，但是我要实现我的其他答案还有另一条路，因为这是迄今为止最好的解决方案.

This approach will use input and output approach but I would have another go at implementing my other answer as this is by far the best solution.

解决方法应该是这样

home.html

<div class="container-fluid">
    <nav-bar (emitRegistered)="onButtonClicked($event)"></nav-bar>
</div>

home.ts

export class HomeComponent implements OnInit {

    public registered: boolean;

    constructor(private userService: UserService) { }

    public ngOnInit() {
        this.registered = true;
    }

    protected onButtonClicked(event: boolean) {

        this.registered = event;
    }
}

NavigationBar.ts

export class NavigationBarComponent{

    @Output() emitRegistered: EventEmitter<boolean> = new EventEmitter();

    constructor (private userService: UserService) { }

    showLogin(){
        this.emitRegistered.emit(true);
    }

    showRegister(){
       this.emitRegistered.emit(false);
    }
}

希望我有帮助

PS在拉动中修复了div未关闭的问题

PS On the pull fixed an issue with a div not being closed

这篇关于同时更改两个不同组件中的值Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！