请帮助需要。我试图通过单击父组件中的按钮在父组件中加载子组件。
需要建议请。我只是让它工作，但我真的很想知道它是否适合这样做。实现如下：
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" data-toggle="tab" (click)="clickStars()"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" data-toggle="tab" (click)="clickFavorite()"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" data-toggle="tab" (click) = "clickFollowings()"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<app-stars *ngIf="!starsHidden"></app-stars>
<app-favorites *ngIf="!favoriteHidden"></app-favorites>
<app-followings *ngIf="!followingsHidden"></app-followings>
</div>
</div>
</div>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
starsHidden:boolean;
favoriteHidden:boolean;
followingsHidden:boolean
constructor() { }
ngOnInit() {
this.starsHidden = false;
this.favoriteHidden = true;
this.followingsHidden = true;
}
clickStars(){
this.starsHidden = false;
this.favoriteHidden = true;
this.followingsHidden = true;
}
clickFavorite(){
this.starsHidden = true;
this.favoriteHidden = false;
this.followingsHidden = true;
}
clickFollowings(){
this.starsHidden = true;
this.favoriteHidden = true;
this.followingsHidden = false;
}
}
是的，这很好，但所有这些变量和方法似乎都是一场噩梦。为什么不只使用字符串，例如：
activeTab: 'STARS' | 'FAVORITES' | 'FOLLOWINGS';
onChangeTab(tab: string){
this.activeTab = tab;
}
您可以将模板更改为类似于以下内容：
<button (click)="onChangeTab('STARS')">Stars</button>
这很好，但如果您制作自己的 TabsComponent 来管理所有这些逻辑，那就更好了，并且您可以轻松地在任何地方重用它。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句