Angular2 - 在父组件中更改Variabel？

这里还有另一个Angular2（TS）问题。Angular2 - 在父组件中更改Variabel？

在我的应用程序中，我有一个父组件，带有一个按钮。（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>

来源

2016-03-21 Habber

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

来源

2016-03-21 14:04:24

十分感谢！这就是诀窍！ - 当然你的意思是输出不输入2.时间:) – Habber

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

来源

2016-03-21 14:04:39

Angular2 - 在父组件中更改Variabel？

回答

相关问题