我想通过使用位于另一个组件中的按钮来显示和隐藏元素。
所以我有一个仪表板,里面有一定数量的腔室和一个标题。
带有 app-header 和 app-chamber 的 DashboardComponent 的 HTML:
<app-header></app-header>
<div class="container">
<div class="row">
<app-chamber [kamers]="kamers"></app-chamber>
</div>
</div>
我的 ChamberComponent 中有这个带有 *ngIf 的 HTML:
<div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index">
<md-card class="chamber wit" *ngIf="kamer.patient == null">
<p *ngIf="showId">{{kamer.id}}</p>
</md-card>
</div>
在 HeaderComponent 中,我有一个需要显示和隐藏元素的按钮:
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
@Input() aList;
dashboardComponent:DashboardComponent;
chamberComponent:ChamberComponent;
constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) {
this.dashboardComponent = dashboardComponent;
this.chamberComponent = chamberComponent;
}
ngOnInit() {
}
// THIS GETS CALLED BY A BUTTON CLICK
toggleId(){
this.chamberComponent.toggleId();
}
}
然后是我的 ChamberComponent 代码:
@Component({
selector: 'app-chamber',
templateUrl: './chamber.component.html',
styleUrls: ['./chamber.component.css']
})
export class ChamberComponent implements OnInit {
@Input() kamers;
showId:boolean;
constructor() {
this.showId=false;
}
ngOnInit() {
}
toggleId = () => {
this.showId = !this.showId;
}
}
所以当我点击按钮时,值会改变(我已经在控制台中记录了这个)但是 View 没有更新..
当我在我的 ChamberComponent 中放置一个调用 toggleId() 函数的按钮时, View 会收到更新并且元素会显示或隐藏。
但我需要通过标题上的按钮来切换它。
最佳答案
Plunker
@Input() kamers
之间有一点不匹配和模板 *ngIf="kamer.patient == null"
.
- 只需将输入更改为
kamer
.
HTML 模板
<md-card class="chamber wit" *ngIf="kamer.patient === null">
<p *ngIf="showId">{{kamer.id}}</p>
</md-card>
<button (click)="toggleId()">Toggle</button>
组件
@Component({
selector: 'material-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
kamer = {
patient: null,
id: '1'
};
showId = false;
ngOnInit() {
}
toggleId() {
this.showId = !this.showId;
}
}
更新 (1) - Plunker (1)
使用@ViewChild
要引用子组件的功能,请使用 ViewChild
- 地点
@ViewChild('child') child;
在父组件中 - 在父模板中引用这样的子函数:
<button (click)="child.toggleId()">Toggle</button>
父组件
@Component({
selector: 'material-app',
template: `
<material-child #child></material-child>
<button (click)="child.toggleId()">Toggle</button>
`
})
export class AppComponent {
@ViewChild('child') child;
}
子模板
<md-card class="chamber wit" *ngIf="kamer.patient === null">
<p *ngIf="showId">{{kamer.id}}</p>
</md-card>
子组件
@Component({
selector: 'material-child',
templateUrl: 'app.component.html'
})
export class ChildComponent {
kamer = {
patient: null,
id: '1'
};
showId = false;
ngOnInit() {
}
toggleId() {
this.showId = !this.showId;
}
}
更新 (2) - Plunker (2)
使用@Output()
+ EventEmitter
要扩展以前的设置以使用同级组件,您可以
- 让 sibling 使用 EventEmitter 发出一个事件
- 监听父组件中发出的事件,并使用
ViewChild
调用需要的子函数
兄弟组件
@Component({
selector: 'material-sibling',
template: `
<button (click)="toggle.emit()">Toggle</button>
`
})
export class SiblingComponent {
@Output() toggle = new EventEmitter();
}
父组件
@Component({
selector: 'material-app',
template: `
<material-child #child></material-child>
<material-sibling (toggle)="child.toggleId()"></material-sibling>
`
})
export class AppComponent {
@ViewChild('child') child;
}
子模板
<md-card class="chamber wit" *ngIf="kamer.patient === null">
<p *ngIf="showId">{{kamer.id}}</p>
</md-card>
子组件
@Component({
selector: 'material-child',
templateUrl: 'app.component.html'
})
export class ChildComponent {
kamer = {
patient: null,
id: '1'
};
showId = false;
ngOnInit() {
}
toggleId() {
this.showId = !this.showId;
}
}
关于Angular 2 使用 *ngIf 和 bool 值隐藏和显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41333807/