Angular2 - 在父組件中更改Variabel？

Question

這裏還有另一個Angular2（TS）問題。

在我的應用程序中，我有一個父組件，帶有一個按鈕。 （class="btn btn-success"） 當我點擊這個按鈕時，我調用一個函數createUserBool，它改變了布爾型的狀態createUserBool。這個布爾值與子組件上的*ngIf一起使用來顯示此組件。（<createuser [createUser]="createUserBool" *ngIf="createUserBool"></createuser>）

子組件是一個「Modal」，我想在此「Modal」中使用按鈕來觸發Boolean並關閉「莫代爾」。

我已經嘗試了幾件事情，但我似乎只能夠改變父變量的子變量而不是其他方式。

我希望有人能幫助我。我對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

您需要在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之一）。

Answer 2

通過@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>