Angular 2 - 更改父组件中的变量？

Question

这是我提出的另一个 Angular2(TS) 问题。

在我的应用程序中，我有一个带有按钮的父组件。 (class="btn btn-success") 当我点击这个按钮时，我调用了一个函数createUserBool，它改变了布尔值createUserBool 的状态。此布尔值与子组件上的 *ngIf 一起使用以显示此组件。(<createuser [createUser]="createUserBool" *ngIf="createUserBool"></createuser>)

子组件是一个“模态”，我想在这个“模态”中使用一个按钮来触发布尔并关闭“模态”。

我已经尝试了几件事，但我似乎只能从父级更改子变量，而不是相反。

我希望有人可以帮助我。我还是 Angular 的新手。 如果有更好的方法来完成类似的结果，请随时赐教！

父组件：

//Imports from Librays
import {Component, View, Input} from "angular2/core";
import {JSONP_PROVIDERS, HTTP_PROVIDERS}  from 'angular2/http';

import {Http, Jsonp} from 'angular2/http';

//Component imports
import {FooterComponent} from '../footer/footer.component';
import {HeaderComponent} from '../header/header.component';
import {CreateUserComponent} from './createuser.component';

//Pipe imports
import {userType} from '../../pipes/userType.pipe';

//Service imports
import {ApiHelper} from '../../services/api.service';

@Component({
    selector: 'useradministration',
    providers: [HTTP_PROVIDERS, ApiHelper],
})

@View({
    templateUrl: '../../templates/useradmin/useradmin.html',
    directives: [HeaderComponent, FooterComponent, CreateUserComponent],
    pipes: [userType],
})

export class UserAdministration { 

    private alluserdata;

    constructor(private ApiService: ApiHelper) {
        ApiService.getAllUsers().subscribe(
            users => this.allusers(users)
        );
    }

    allusers(users){
        this.alluserdata = users;
    }

    createUserBool: boolean;
    public onCreateToggle() { this.createUserBool = !this.createUserBool; console.log(this.createUserBool)}
}

父模板：（部分）

<div class="page-container-bg-solid page-boxed page-md">

    <adnexio-header protected></adnexio-header>

    <div class="container">
        //Soem content here
    </div>

    <createuser [createUser]="createUserBool" *ngIf="createUserBool"></createuser>

    <adnexio-footer></adnexio-footer>

</div>

子组件：

//Imports from angular2
import {Component, View, ChangeDetectionStrategy, NgZone, Input} from "angular2/core";
import {Http, Headers, RequestOptions, JSONP_PROVIDERS, HTTP_PROVIDERS, Response}  from 'angular2/http';
import {FORM_PROVIDERS, FormBuilder, Validators, ControlGroup, Control} from 'angular2/common';

import {Observable}                                                 from 'rxjs/Observable';

//Component imports
import {FooterComponent} from '../footer/footer.component';
import {HeaderComponent} from '../header/header.component';
import {UserAdministration} from './useradmin.component';
//Pipe imports
import {userType} from '../../pipes/userType.pipe';

//Service imports
import {ApiHelper} from '../../services/api.service';

@Component({
    selector: 'createuser',
    providers: [HTTP_PROVIDERS, ApiHelper]
})

@View({
    templateUrl: '../../templates/useradmin/createuser.html',
    directives: [HeaderComponent, FooterComponent /*, UserAdministration*/],
    pipes: [userType]
})

export class CreateUserComponent {

    @Input() createUser: boolean;

    superDupererrorMessage = "No error";
    public usertypes;
    form: ControlGroup;

    constructor(public theApiHelper: ApiHelper, fb: FormBuilder) {

        theApiHelper.getUserTypes().subscribe(types => {
            this.usertypes = types;
        });

        this.form = fb.group({
            "firstName": ["", Validators.required],
            "lastName": ["", Validators.required],
            "email": ["", Validators.required],
            "type": ["", Validators.required],
            "password": ["", Validators.required],
            "confirmPassword": ["", Validators.required],
        });        
    }


    //Submit function:
    public onSubmit() {
        console.log(this.form.value);
        this.theApiHelper.createUser(this.form.value)
            .subscribe((err) => {
                this.superDupererrorMessage = err
                console.log(this.superDupererrorMessage);
                });
    }

    public createUserToggle(){
        this.createUser = !this.createUser;
        console.log(this.createUser)
    }
}

子模板：（部分）

<div class="overlay">
    <div class="overlayContainer">

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light ">

                        <div class="errorMessage alert alert-danger" >
                            <strong>Error!</strong> {{superDupererrorMessage}}
                        </div>

                        <div class="portlet-title">
                            <div class="caption caption-md">
                                <i class="icon-user font-green"></i>
                                <span class="caption-subject font-green bold uppercase">User Creation</span>
                                <span class="caption-helper">Create them users!</span>
                            </div>
                            <div class="actions">
                                <button type="button" class="btn btn-danger" (click)="createUserToggle()">Cancel creation</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

Answer 1

使用@output()，您可以将更改通知家长。如果输出的名称与输入的名称相同，但带有Change 后缀，则可以使用简写双向绑定语法[(name)]="xxx"

export class CreateUserComponent {

    @Input() createUser: boolean;
    @Output() createUserChange:EventEmitter<boolean> = new EventEmitter<boolean>();

   public createUserToggle(){
        this.createUser = !this.createUser;
        this.createUserChange.emit(this.createUser);
        console.log(this.createUser);
    }
}

<createuser [(createUser)]="createUserBool" *ngIf="createUserBool"></createuser>

Answer 2

您需要在CreateUserComponent 子组件中创建一个像这样的@Ouput：

@Input() createUser: boolean;
@Input() createUserChange: EventEmitter<boolean> = new EventEmitter();

(...)

public createUserToggle(){
  this.createUser = !this.createUser;
  console.log(this.createUser)
  this.createUserChange.emit(this.createUser);
}

然后在父组件中使用子组件时像这样利用两个绑定：

<createuser [(createUser)]="createUserBool" *ngIf="createUserBool"></createuser>

这样您就可以通过触发自定义事件（createUserChange 事件）来通知父级。