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

您需要在@Ouput子组件中创建CreateUserComponent这样的内容：

@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）来通知父母。

Angular2 - 在父组件中更改Variabel？

2 个答案: