这是我的第一个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() {
}
}
这个问题可能看起来很幼稚,但如果有人可以提供建议,我会很感激。谢谢!
答案 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'];
}