0

我在网页中有一个锚标记，其 href 值取决于属性不受此组件控制的服务。服务详细信息是异步填充的。

为了获取服务详细信息并创建 href 值，我想到了两种方法。 我的问题是 - 在性能方面哪个更好？什么应该是更好的选择？

使用函数作为 href 属性

这会导致函数被连续调用。

// 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}`;
    }
}

使用 ngDoCheck

// 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}`;
        }
    }
}

感谢您阅读到这里。任何指导表示赞赏

4

2 回答 2

1

您有一些业务逻辑来生成该 url，而服务是业务逻辑的地方。解决方案一是去这里的方法。

话虽如此，基于https://www.something.com/users/链接的部分是否是静态的事实，我也会考虑使用管道来构建这样的 url，以利用 memoization。

你最终会得到类似的东西：

<a [href]="someUser | buildLink"></a>
于 2019-11-26T20:33:58.133 回答
1

我的意见是绝对应该避免第一种方法。

如果以这种方式使用函数，它将在每个可能影响性能的更改检测周期中调用（有时，以可见的方式）。

ngDoCheck也会在每个变更检测周期中被调用，所以我会避免在这里添加任何严肃的工作。

一种方法是 Massimiliano 提出的：使用管道，这样您就可以利用记忆的力量。 这是一个很棒的演讲，它增强了使用管道的好处。

但是，我认为对于这种情况，不需要管道。

如果你说这个值依赖于一个服务异步提供的值，你可以把这个逻辑包装到Subjects和Observers中。

用户服务.ts

export class UserService {
    private linkChangedSubj = new Subject();

    get linkChanged$ () {
        return this.linkChangedSubj.asObservable();
    }


    changeLink (newLink) {
        /* ... */

        this.linkChangedSubj.next(newLink);
    }
}

用户.component.ts

export class UserComponent {

    constructor (private userService: UserService) { }

    ngOnInit () {
        this.userService.linkChanged$
            .pipe(takeUntil(this.unsubscribe$))
            .subscribe(newLink => this.detailsLink = newLink)
    }
}
于 2019-11-26T21:34:06.813 回答