Question

我的组件中有以下Angular代码，该代码是从服务中显示的按钮显示的：

buttons: any;
private buttonsSubscription: Subscription;

ngOnInit() {
  this.buttonsSubscription = this.toolbarService.getButtons().subscribe((buttons: any) => {
    this.buttons = buttons;
  });

}

然后在我的html中执行以下操作：

<li *ngIf="buttons && buttons.length>0" class="buttons">
    <span *ngFor="let button of buttons">
        <a [routerLink]="[button.link]" title="{{button.text}}"><span>{{button.text}}</span></a>
    </span>
</li>

我想添加一个button.onclick项，因此某些按钮将具有Delete（），其他按钮可能具有Print（）。

如何将其传递给我的html？

这是我想做的（但显然不起作用）：

<a (click)="{{button.onclick}}" title="{{button.text}}"><span>{{button.text}}</span></a>

Answer 1

尝试进行以下更改

.ts

this.actions.pipe(
ofType(SUCCESS_ACTION),
takeUntil(this.componentActive),
mergeMap(v => this.state))
.subscribe((data => any) => { this.initForm(data) });

.html

let button = {
  // properties
  onClick : "onDelete";
}

onDelete(){
 console.log("Delete Click");
}

您还可以查看此demo

Answer 2

您可以配置类似[routerLink]="['/', button.link]"

HTML：

<li *ngIf="buttons && buttons.length>0" class="buttons">
<span *ngFor="let button of buttons">
    <a [routerLink]="['/', button.link] title="{{button.text}}"><span>{{button.text}}</span></a>
</span>

如果要添加按钮，则可以添加click事件并从TS调用方法进行路由。

  <li *ngIf="buttons && buttons.length>0" class="buttons">
        <span *ngFor="let button of buttons">
        <button (click)="routeButton(button)">Click ME</button>
        </span>
    </li>

TS：

   routeButton(button){
this._router.navigateByUrl(button.link);
    }

将动态点击处理程序传递给Angular按钮

2 个答案: