web-dev-qa-db-ja.com

angular 4？

現在、Angular 4で新しいキーワードasが導入されました。

ASキーワード –テンプレート構文に新たに追加されたのはas keywordは、let構文を単純化するために使用されます。

私はこれを以下のコードで実装しました。

<div *ngIf="users | async as usersModel">
    <h2>{{ usersModel.name }}</h2> <small>{{ usersModel.age }}</small>
</div>

以下の質問については、どこからでも詳細を知ることができません。

質問：

  • usersオブジェクトとuserModelオブジェクト*の違いは何ですか。
  • asキーワードの主な用途は何ですか？
  • テンプレートのasとletの違いは何ですか？
angularlet
5
Ramesh Rajendran

"as"キーワードを使用する最良の例を用意しました。

これを使用しなかった場合、コードは読みにくくなり、次のようになります。

<div *ngIf="users | async as usersModel">
    <h2>{{ (users | async)?.name }}</h2> <small>{{ (users | async).age }}</small>
</div>

この例では、ユーザーはObservableオブジェクトです。 kaywordのおかげで、ObservableオブジェクトのasyncパイプのuserModel結果に割り当てることができます。 F.e.

usersがusers: Observable<User>;の場合、usersModelはusers変数の非同期パイプの結果であるため、usersModel: Userオブジェクトのようになります。

asおよびletに関する質問の@EDIT

asとletは2つの異なるものであるため、違いはわかりません。 letはjavascript変数タイプであり、次のようになります。

スコープがブロックに制限されている変数を宣言できます

asはAngularキーワードで、メソッド/パイプの結果を他の変数に割り当てることができます。

これはあなたの最初の投稿なので、私は思い出します：Angularはプログラミング言語ではなく、JavaScriptフレームワークです。Angularのほとんどのものは、純粋なJSまたはTSに関連しています。

Angularのforループの宣言は、ECMAScript6からの配列ごとのループの宣言のコピーです。

forループ（ECMAScript6）

let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}

コンポーネントテンプレートのforループ

<div *ngFor="let user of users">

キーワードasは、メソッドの可変結果への割り当てのショートカットです。

some.pipe.ts

@Pipe({
    name: 'somePipe'
})
export class SomePipe {
    transform(value: number): number {
        return number * 2;
    }
}

<div *ngIf="someValue | somePipe as otherValue">の使用は次のようになります。

let otherValue = SomePipe.transform(someValue);

わかりますか？

p.s：もちろん、私の答えの最後の段落は精神的な近道にすぎません。 ngForおよびngIfディレクティブが「内部」でどのように機能するかを知りたい場合は、 Nir Kaufman --Demystified Angularディレクティブ 講義をご覧になることをお勧めします。

10
Jaroslaw K.

受け入れられた回答は、1つの非常に重要なポイントを見逃しています。async observableにサブスクライブして、解決された値を取得します。

このシーンを想像してみてください。

コンポーネント：

user:Observable<IUser> = httpClient.get(url);

テンプレート：

<div>
    <h2>{{ (users|async).name }}</h2> <small>{{ (users|async).age }}</small>
</div>

上記の場合、asyncを2回使用しているため、httpClientはgetリクエストを行っていますtwice。

だからあなたの質問に答えるために：

[〜＃〜] q [〜＃〜]。 asキーワードの主な用途は何ですか？

[〜＃〜] a [〜＃〜]。 asキーワードを使用すると、コードの見栄えが良くなりますが、さらに重要なのは、上記で説明したように、特定のオブザーバブルに対して非同期を1回だけ使用するようにすることですです。

[〜＃〜] q [〜＃〜]。テンプレートのasとletの違いは何ですか？

[〜＃〜] a [〜＃〜]。 letはJavascriptキーワードです。 asキーワードはangularテンプレートコンパイラによってのみ認識されます。どちらも変数の宣言と初期化の同じ仕事をします。*ngForのように、両方とも置き換え可能です。 。ただし、*ngIfの場合、式にブール変数が必要であり、let x = trueはブール値を返さないため、asのみを使用できます。

[〜＃〜] q [〜＃〜]。 usersオブジェクトとuserModelオブジェクトの違いは何ですか

[〜＃〜] a [〜＃〜]。これはすでに答えられています。 usersオブジェクトはObservableであり、userModelオブジェクトはusersObservableの解決された値です。

3
dasfdsa