按下按钮时如何动态更改组件

Question

我有一个父组件，其中默认显示一个子组件，如何才能在我点击时间轴时显示另一个具有不同图表的组件，而不是我的饼图组件

enter image description here

parent.component.html

        <div class="portfolio__column">
          <ul class="portfolio__select">
            <li class="portfolio__select-item">
              <a routerLinkActive="active" [routerLink]="['/dashboard']">Breakdown</a>
            </li>
            <li class="portfolio__select-item">
              <a routerLinkActive="active" [routerLink]="['/dashboard']">Timeline</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="portfolio__row">
        <app-doughnut-chart></app-doughnut-chart>
      </div>

Answer 1

你可以有一个像

这样的routerPath

const routes: Routes = [
  { path: 'line-chart', component: LineChartComponent },
  { path: 'doughnut-chart', component: DoughnutChartComponent }
];
@NgModule({
  imports:      [ BrowserModule, FormsModule,RouterModule.forRoot(routes) ],
  declarations: [ AppComponent, DoughnutChartComponent,LineChartComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

你的 appComponent 喜欢

<ul class="portfolio__select">
   <li class="portfolio__select-item">
      <a routerLinkActive="active" [routerLink]="['/line-chart']">Breakdown</a>
   </li>
   <li class="portfolio__select-item">
       <a routerLinkActive="active" [routerLink]="['/doughnut-chart']">Timeline</a>
   </li>
</ul>
<router-outlet></router-outlet>

然后，当您的 url 类似于 localhost:4200/doughnut-chart' you see the DougnnutChartComponent and when is localhost:4200/line-chart' 时，您会看到 LineChartComponent

或者您可以采取另一种不更改“url”的方法，只需使用变量“typeChart”。在你的 .ts 中你定义

typeChart:string='line'

还有你的.html喜欢

    <ul class="portfolio__select">
       <li class="portfolio__select-item">
          <a [class.active]="typeChart=='line' (click)="typeChart='line' >Breakdown</a>
       </li>
       <li class="portfolio__select-item">
           <a [class.active]="typeChart=='doughnut' (click)="typeChart='doughnut'">Timeline</a>
       </li>
    </ul>
<app-doughnut-chart *ngIf="typeChart=='doughnut'></app-doughnut-chart>
<app-line-chart *ngIf="typeChart=='line'></app-line-chart>

好吧，如果你创建一个 app-dashboard-component like

最后一种方法

@Input()typeChart="line" //<--in .ts

<app-doughnut-chart *ngIf="typeChart=='doughnut'></app-doughnut-chart>
<app-line-chart *ngIf="typeChart=='line'></app-line-chart>

还有你的主要组件

   <ul>
    ...
   </ul>
   <app-dashboard-component [typeChart]="typeChart">
   </app-dashboard-component>

在第一种方法中，您使用 router, in the second one you use *ngIf 结构指令。看到这是两种完全不同的方法

按下按钮时如何动态更改组件

How to dynamic component change when the button is pressed

angular

angular2-routing