Angular ngDoCheck VS使用函数作为属性值-性能差异
我在网页中有一个锚定标记，其href值取决于一个属性不受此组件控制的服务。服务详细信息以异步方式填充 为了获得服务细节并创建href值，我想到了两种方法。 我的问题是-哪一个性能更好？更好的选择是什么？ 将函数用作href atribute 这会导致连续调用该函数Angular ngDoCheck VS使用函数作为属性值-性能差异,angular,angular-lifecycle-hooks,angular2-docheck,Angular,Angular Lifecycle Hooks,Angular2 Docheck,我在网页中有一个锚定标记，其href值取决于一个属性不受此组件控制的服务。服务详细信息以异步方式填充 为了获得服务细节并创建href值，我想到了两种方法。 我的问题是-哪一个性能更好？更好的选择是什么？ 将函数用作href atribute 这会导致连续调用该函数 // Inside component.html <div> <a [href]="getDetailsLink()"></a> </div> // Inside compon
// Inside component.html
<div>
<a [href]="getDetailsLink()"></a>
</div>
// Inside component.ts
@Component({ selector: 'user', template: `...` })
class UserComponent implements DoCheck {
public detailsLink: string;
constructor(
private userService: UserService
) {
}
public getDetailsLink(): string {
// Based on the below property
const checkSomeProperty = this.userService.checkSomeProperty;
// Construct details link
this.detailsLink = `https://www.something.com/users/${this.userService.checkSomeProperty.someValue}`;
}
}
//Inside component.html
//内部组件.ts
@组件（{选择器：'用户'，模板：`…`}）
类UserComponent实现了DoCheck{
公共详细信息链接：字符串；
建造师(
私有用户服务：用户服务
) {
}
public getDetailsLink（）：字符串{
//基于以下属性
const checkSomeProperty=this.userService.checkSomeProperty；
//构造详细信息链接
this.detailsLink=`https://www.something.com/users/${this.userService.checkSomeProperty.someValue}`；
}
}
// Inside component.html
<div>
<a [href]="detailsLink"></a>
</div>
// Inside component.ts
@Component({ selector: 'user', template: `...` })
class UserComponent implements DoCheck {
public detailsLink: string;
constructor(
private userService: UserService
) {
}
ngDoCheck() {
if (this.userService.checkSomeProperty) {
// Check changes for the property
// Perform required action
// Construct details link
this.detailsLink = `https://www.something.com/users/${this.userService.checkSomeProperty.someValue}`;
}
}
}
//Inside component.html
//内部组件.ts
@组件（{选择器：'用户'，模板：`…`}）
类UserComponent实现了DoCheck{
公共详细信息链接：字符串；
建造师(
私有用户服务：用户服务
) {
}
ngDoCheck（）{
if（this.userService.checkSomeProperty）{
//检查属性的更改
//执行所需的操作
//构造详细信息链接
this.detailsLink=`https://www.something.com/users/${this.userService.checkSomeProperty.someValue}`；
}
}
}
谢谢你一直读到这里。欢迎提供任何指导您有一些业务逻辑来生成url，而服务是业务逻辑的场所。解决方案一是走这条路 也就是说，基于
https://www.something.com/users/<a [href]="someUser | buildLink"></a>
您有一些业务逻辑来生成url，而服务是业务逻辑的场所。解决方案一是走这条路 也就是说，基于
https://www.something.com/users/<a [href]="someUser | buildLink"></a>
我的意见是第一种方法应该绝对避免 如果以这种方式使用函数，则会在每个可能影响性能的更改检测周期中调用该函数（有时，以可见方式） ngDoCheck也将在每个变更检测周期中被调用，因此我不会在这里添加任何严肃的工作 一种方法是马西米利亚诺提出的：使用管道，这样你就可以利用记忆的力量。 这增强了使用管道的好处 然而，我认为在这种情况下，不需要管道 如果您说该值异步地依赖于服务提供的值，那么可以将该逻辑包装为主题和观察者 user.service.ts
导出类用户服务{
private linkChangedSubj=新主题（）；
获取链接更改$（）{
返回此.linkChangedSubj.asObservable（）；
}
更改链接（新链接）{
/* ... */
this.linkChangedSubj.next（newLink）；
}
}
导出类用户组件{
构造函数（私有用户服务：用户服务）{}
恩戈尼尼特（）{
this.userService.linkChanged$
.pipe（takeUntil（此.unsubscribe$））
.subscribe（newLink=>this.detailsLink=newLink）
}
}
导出类用户服务{
private linkChangedSubj=新主题（）；
获取链接更改$（）{
返回此.linkChangedSubj.asObservable（）；
}
更改链接（新链接）{
/* ... */
this.linkChangedSubj.next（newLink）；
}
}
导出类用户组件{
构造函数（私有用户服务：用户服务）{}
恩戈尼尼特（）{
this.userService.linkChanged$
.pipe（takeUntil（此.unsubscribe$））
.subscribe（newLink=>this.detailsLink=newLink）
}
}