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 Configuration按钮，用户将看到完全相同的屏幕。唯一的区别是将要呈现的数据。

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

为每个按钮创建单独的组件
共享相同的组件，但使用一些标志来告知单击了哪个按钮。

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

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

1 个答案: