Angular 5 - 将数据从Button动态传递到Component

时间:2018-04-30 08:52:25

标签: angular

这是我的第一个Angular项目,我在这里面临一个问题。

在主屏幕上,我有2个按钮共享相同的组件:

<div class="container">
  <div class="panel panel-primary">
      <div class="panel-heading">
          <h4 class="panel-title">
            Mandate
          </h4>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-8">
              <a routerLink="/configuration"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>
          </div>
        </div>
      </div>
    </div>
  <div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">
          Funds
        </h4>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-8">
            <a routerLink="/configuration"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>
        </div>
      </div>
    </div>
  </div>
</div>

单击2 Configuration按钮,用户将看到完全相同的屏幕。唯一的区别是将要呈现的数据。

我可以在这里考虑两个选项:

  1. 为每个按钮创建单独的组件
  2. 共享相同的组件,但使用一些标志来告知单击了哪个按钮。
  3. 选项2似乎更清晰,但我不知道如何实现这一目标。

    这是我的路由器的配置方式:

    export const routes: Routes = [
      { path: 'configuration', component: ConfigurationComponent,  canActivate: [AuthenticationGuard], data : { title: 'Configuration' } },
      // Other paths...
    ];
    

    这是我的实际组成部分:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-configuration',
      templateUrl: './configuration.component.html',
      styleUrls: ['./configuration.component.css']
    })
    export class ConfigurationComponent implements OnInit {
    
      constructor() { }
    
      ngOnInit() {
      }
    
    }
    

    这个问题可能看起来很幼稚,但如果有人可以提供建议,我会很感激。谢谢!

1 个答案:

答案 0 :(得分:0)

<a [routerLink]="['/configuration','btn1']"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>

<a [routerLink]="['/configuration','btn2']"><button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i> Configuration</button></a>

route内:

{ path: 'configuration/:btn', component: ConfigurationComponent,  canActivate: [AuthenticationGuard], data : { title: 'Configuration' } },

<强> component.ts

constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.btnType = +params['btn']; 
  }