这里还有另一个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>
十分感谢!这就是诀窍! - 当然你的意思是输出不输入2.时间:) – Habber