Question

我有一个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>

但是我怀疑这是实际的方法还是更好的方法？

Angular 7使用不同的子组件重新加载当前的html页面

0 个答案: