0

プロパティがこのコンポーネントの制御下にないサービスに依存する href 値を持つ Web ページにアンカー タグがあります。サービスの詳細は非同期に入力されます。

サービスの詳細を取得して href 値を作成するために、2 つの方法を考えました。 私の質問は - パフォーマンスの点でどちらが優れていますか? より良いオプションは何ですか？

関数を 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 を生成するためのビジネス ロジックがいくつかあり、サービスはビジネス ロジックの場所です。解決策 1 は、ここに行く方法です。

そうは言っても、リンクの一部が静的であるかどうかに基づいて、https://www.something.com/users/メモ化を利用するために、そのような URL を構築するためにパイプを使用することも考えます。

あなたは次のようなものになるでしょう：

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