Angular2 - Ebeveyn Bileşenindeki Variabel'i Değiştirin?

Question

Burada bir başka Angular2 (TS) soru formu bana daha gider.

Uygulamamda bir düğme ile bir ana bileşenim var. (class="btn btn-success") Bu düğme tıklandığında, bir Boole createUserBool durumunu değiştiren createUserBool işlevini çağırın. Bu Boole (<createuser [createUser]="createUserBool" *ngIf="createUserBool"></createuser>)

çocuk bileşeni "Modal" dir. Bu bileşeni göstermek için bir çocuk bileşeni üzerinde bir *ngIf kullanılır ve ben Boole tetikleyebilir ve kapatılması bu "Modal" bir düğmeyi kullanmak istiyorum "Modal".

Birkaç şeyi denedim, ancak yalnızca Çocuk değişkenlerini ebeveyn biçiminde değiştirebiliyormuş gibi görünüyorum.

Umarım birisi bana yardım edebilir. Hala Angular'a yeni geliyorum. Benzer bir sonuç elde etmek için daha iyi bir yol varsa, lütfen beni aydınlatmaktan çekinmeyin!

Veli Bileşeni:

//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)} 
} 

Üst Şablon: (Bazıları)

<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> 

Çocuk Bileşen:

//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) 
    } 
} 

Çocuk Şablon: (Bazıları)

<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

Sen CreateUserComponent çocuk bileşeninde böyle bir @Ouput oluşturmanız gerekir:

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

(...) 

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

ve sonra kaldıraç iki böyle bağlayıcı bir ebeveyn daki alt bileşenini kullanırken:

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

Bu şekilde Özel bir olayı (createUserChange one) tetikleyerek üst öğeyi bilgilendirebilirsiniz.

Answer 2

@output() ile ebeveyn hakkında değişiklikleri bildirebilirsiniz. çıktının ismi Change soneki ile değil, girişi ile aynı ise, kısa el iki yönlü bağlama sözdizimini [(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>