Question

请帮忙。我试图通过单击父组件中的按钮在父组件中加载子组件。

请提出建议。我只是让它工作但我真的很愿意知道它是否适合这样做。实施如下：

<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;
  }

}

Answer 1

是的，没关系，但所有这些变量和方法看起来都像是一场噩梦。为什么不使用字符串，例如：

activeTab: 'STARS' | 'FAVORITES' | 'FOLLOWINGS';

onChangeTab(tab: string){
    this.activeTab = tab;
}

您可以将模板更改为与此类似的内容：

<button (click)="onChangeTab('STARS')">Stars</button>

这没关系，但是如果你制作了自己的TabsComponent来管理所有逻辑，那就更好了，你可以轻松地重复使用它。

Answer 2

更改标签以加载不同的组件

.html代码

<mat-button-toggle-group #group="matButtonToggleGroup" aria-label="Font Style" (change)="onValChange($event)">
      <mat-button-toggle value="sct">Sub-Contract</mat-button-toggle>
      <mat-button-toggle value="matr">Material</mat-button-toggle>
    </mat-button-toggle-group>
    <div *ngIf="toggleComponent; else elseBlock">
      <app-sub-contract></app-sub-contract>
    </div>
    <ng-template #elseBlock>
      <app-material></app-material>
    </ng-template>

在ts文件内部初始化toggleComponent = true

.ts代码

 public onValChange(event) {
    console.log(event);
    if (event.value === 'matr') { this.toggleComponent = false; }
    else { this.toggleComponent = true; }
  }

如何在点击按钮角4时加载子组件

2 个答案: