文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在按下按钮时动态更改组件

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

Stack Overflow用户

提问于 2022-03-25 20:38:37

回答 1查看 80关注 0票数 0

在默认情况下，我有一个父组件，并在其中显示了一个子组件，如何使其在单击“时间线”时，而不是在饼图组件中显示另一个具有不同关系图的组件。

在这里输入图像描述

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>

angular

angular2-routing

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-27 13:32:21

你可以有一个像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/行图表‘时，您将看到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>

好吧，如果您创建一个应用程序仪表板组件，那么最后一种方法可以是

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

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

还有你的mainComponent

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

在第一种方法中使用路由器，在第二种方法中使用ngIf结构指令。这是两种完全不同的方法

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71622853

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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