Angular2 - 在父组件中更改Variabel？

这是我的另一个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>