我想通过使用位于另一个组件中的按钮来显示和隐藏元素.
带有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;
}
}
因此,当我单击按钮时,值会更改(我已在控制台中记录此值),但视图未更新..
当我在我的ChamberComponent中放置一个调用toggleId()函数的按钮时,视图会显示更新并显示或隐藏元素.
但我需要从标题上的按钮切换它.
解决方法
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(‘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
要扩展先前的设置以使用兄弟组件,您可以
>让兄弟姐妹使用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',id: '1'
};
showId = false;
ngOnInit() {
}
toggleId() {
this.showId = !this.showId;
}
}
