如何使用（单击）函数将字符串从 HTML 传递到 Angular 8 上的组件？

Question

我有这段代码，它工作正常：

<a [routerLink]="['/menuItemOne']">
    <span [innerHTML]="(mystrings$ | async)?.menuItemOne | htmlToText"></span>
</a>

但现在我需要在单击 link 时更新页面标题。

我在组件上添加了一个setTitle方法：

public setTitle( newTitle: string) {
   this.titleService.setTitle( newTitle );
}

使用 (click) 函数我可以更新页面标题并且它工作正常：

<a [routerLink]="['/menuItemOne']" (click)="setTitle('Menu Item One')">
    <span [innerHTML]="(strings$ | async)?.menuItemOneStr | htmlToText"></span>
</a>

但是我该怎么做才能传递变量 menuItemOneStr 而不是使用字符串 'Menu Item One'？

我试过了：

<a [routerLink]="['/menuItemOne']" (click)="setTitle((strings$ | async)?.menuItemOneStr | htmlToText)">
    <span [innerHTML]="(strings$ | async)?.menuItemOneStr | htmlToText"></span>
</a>

但是没用。有什么想法吗？

Answer 1

您可以通过 setTitle 方法订阅它

public setTitle(key: string) {
    // key = menuItemOneStr, menuItemTwoStr, etc.
    this.strings$.subscribe((stringsObject: object) => {
        this.titleService.setTitle(stringsObject[key]);
    })
}

在你的 HTML

<a [routerLink]="['/menuItemOne']" (click)="setTitle('menuItemOneStr')">
    <span [innerHTML]="(strings$ | async)?.menuItemOneStr | htmlToText"></span>
</a>

这意味着您订阅了两次，因为 async 管道也订阅了。您的 strings$ 似乎是 Observable<object>[]，因此您可以使用 ngFor 并订阅一次。这意味着您的 setTitle 保持不变，但 HTML 已更改。请注意，您可以使用 {{ variableName | somePipe }} 符号在任何带有管道的标签内使用插值。

已更新HTML

<ng-container *ngFor="let stringDetails of strings$ | async; index as i">
    <a [routerLink]="[stringDetails.link]" (click)="setTitle(stringDetails.title)">
        <span>{{stringDetails.text | htmlToText}}</span>
    </a>
</ng-container>

如何使用（单击）函数将字符串从 HTML 传递到 Angular 8 上的组件？

How to pass a string from HTML to the Component on Angular 8 using (click) function?

page-title

angular

angular8