Angular 5 - Динамическая передача данных от кнопки к компоненту

Question

Это мой первый 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 кнопки конфигурации, пользователь увидит точно такой же экран. Разница лишь в данных, которые будут представлены.

Я могу придумать 2 варианта здесь:

1. Создание отдельных компонентов для каждой кнопки
2. Предоставить общий доступ к тому же компоненту, но с помощью какого-либо флажка указать, какая кнопка была нажата.

Вариант 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() {
  }

}

Этот вопрос может показаться наивным, но был бы признателен, если бы кто-нибудь мог посоветовать. Спасибо!

Answer 1

Помещенный

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