我有一个HomeComponent
,其中有
我研究了如何将子组件应用于现有组件。但是我如何才能基于单击切换选择器。我不希望重新加载整个页面。 我的代码如下所示:
<app-header></app-header>
<div class="container">
<div class="row min-vh-100 justify-content-center">
<div class="col-3 bg-warning">
<app-profile></app-profile>
<app-trending></app-trending>
</div>
<div class="col-9">
<ul class="nav nav-fill">
<li class="nav-item ">
<a class="nav-link active">Tweets</a>
</li>
<li class="nav-item">
<a class="nav-link" >Login</a>
</li>
<li class="nav-item">
<a class="nav-link">Register</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="mt-5">
<app-tweets [hidden]="isTweets()"></app-tweets>
<app-login [hidden]="isFollowers()"></app-login>
<app-register [hidden]="isFollowing()"></app-register>
</div>
</div>
</div>
</div>
<div class="text-body">This is a footer</div>
工作:HomeComponent
import {Component, OnInit} from '@angular/core';
import {HomeTabsState} from './HomeTabsState';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
currentTabState: HomeTabsState;
constructor() {
}
ngOnInit() {
this.currentTabState = HomeTabsState.Tweets;
}
getTwitter(): HomeTabsState {
return HomeTabsState.Tweets;
}
getFollower(): HomeTabsState {
return HomeTabsState.Followers;
}
getFollowing(): HomeTabsState {
return HomeTabsState.Following;
}
getLikes(): HomeTabsState {
return HomeTabsState.Likes;
}
UpdateHome(state: HomeTabsState) {
this.currentTabState = state;
console.log("new state " + state);
}
}
HTML:
<app-header></app-header>
<div class="container">
<div class="row min-vh-100 justify-content-center">
<div class="col-3 bg-warning">
<app-profile></app-profile>
<app-trending></app-trending>
</div>
<div class="col-9">
<ul class="nav nav-fill">
<li class="nav-item " (click)="UpdateHome(getTwitter())">
<a class="nav-link active">Tweets</a>
</li>
<li class="nav-item" (click)="UpdateHome(getFollower())">
<a class="nav-link" >Login</a>
</li>
<li class="nav-item" (click)="UpdateHome(getFollowing())">
<a class="nav-link">Register</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="mt-5">
<div *ngIf="currentTabState.valueOf() === getTwitter().valueOf()">
<app-tweets></app-tweets>
</div>
<div *ngIf="currentTabState.valueOf() === getFollower().valueOf()">
<app-login></app-login>
</div>
<div *ngIf="currentTabState.valueOf() === getFollowing().valueOf()">
<app-register></app-register>
</div>
<div *ngIf="currentTabState.valueOf() === getLikes().valueOf()">
<app-likes></app-likes>
</div>
</div>
</div>
</div>
</div>
<div class="text-body">This is a footer</div>
但是我怀疑这是实际的方法还是更好的方法?