タグ付けされた質問 「angular」

を使用してフォームの値を取得できることを認識しています JSON.stringify（this.formName.value）ただし、フォームから単一の値を取得したいと思います。 どうすればそれを行うことができますか？

86 angular  typescript 

Angularプロジェクトでレンジスライダーを使用したいので、Angular4で使用可能なモジュールを1つ使用してみました。 コンパイル中は正常に動作しますが、デプロイ用にビルドしようとすると、以下のエラーがスローされます。 AngularプロジェクトでjQueryプラグインを直接使用するオプションを確認しましたが、Angular2でそれを実行するためのオプションしか取得していません。 Angular 4でjQueryプラグインを使用する方法はありますか？ 私にお知らせください。 前もって感謝します！

85 jquery  angular 

問題は、アプリを実行すると正常に動作することです。しかし、それを更新すると、ほとんどの場合、メッセージを下回ります。 セレクター「my-app」がどの要素とも一致しませんでした しかし、奇妙なことに、アプリを更新すると、それも機能することが何度もあります。 そのため、最終的にはアプリの動作がおかしくなり、これを理解できなくなります。 時々それは時々動作しません... どんな提案でも、コードを思い付くことができませんか？ 注：複雑な構造やコンポーネントはまだありませんが、実装は単純です。

85 angular 

クローズ。この質問には詳細または明確さが必要です。現在、回答を受け付けていません。 この質問を改善したいですか？この投稿を編集して、詳細を追加し、問題を明確にしてください。 3年前に閉鎖されました。 この質問を改善する Angular 2で現在のページをリロードするにはどうすればよいですか？ ページ2（ページ付け）でiamを使用してページを更新すると、ページ1（URLページロード）が表示されますが、ページ2を更新すると、ページ2に表示されます。

85 angular  refresh  angular2-routing  reload  page-refresh 

Angular 1.xxでは、同じサービスを要求するだけで、最終的に同じインスタンスになり、サービス内のデータを共有できるようになります。 現在、Angular 2には、自分のサービスへの参照を持つコンポーネントがあります。サービス内のデータを読み取って変更できます。これは良いことです。同じサービスを別のコンポーネントに挿入しようとすると、新しいインスタンスを取得したように見えます。 私は何が間違っているのですか？パターン自体が間違っている（サービスを使用してデータを共有している）のでしょうか、それともサービスをシングルトン（アプリの1つのインスタンス内）としてマークする必要があるのでしょうか？ 私は2.0.0-alpha.27/ ところで アノテーションのappInjector（edit：now providers）を介してサービスを挿入@Componentし、コンストラクターに参照を保存します。これは、コンポーネント内でローカルに機能します。私が思っていたように、コンポーネント間では機能しません（同じサービスインスタンスを共有しません）。 更新：Angular 2.0.0の時点で、@ ngModuleがあり、上記のprovidersプロパティの下にサービスを定義します@ngModule。これにより、そのサービスの同じインスタンスがそのモジュール内の各コンポーネント、サービスなどに渡されるようになります。 https://angular.io/docs/ts/latest/guide/ngmodule.html#providers 更新：AngularとFEの開発全般に多くのことが起こりました。@noriricoが述べたように、NgRxのような状態管理システムを使用することもできます：https：//ngrx.io/

84 angular  typescript 

Angular2RC5にアップグレードしようとしているAngular2Seedプロジェクトに基づく小さなAngular2プロジェクトがあります。 私のプロジェクトにはいくつかの機能があり、そのうちの1つはと呼ばれhomeます。ホームコンポーネントは、と呼ばれる子コンポーネントを使用しますcreate-report-card-form。（以下のコードを参照）create-report-card-formでホームとコンポーネントの両方を宣言しましたが、home.moduleこのエラーが発生します： 未処理のPromise拒否：テンプレート解析エラー：「create-report-card-form」の既知のプロパティではないため、「currentReportCardCount」にバインドできません。 'create-report-card-form'がAngularコンポーネントであり、 'currentReportCardCount'入力がある場合は、それがこのモジュールの一部であることを確認してください。 プロジェクト構造 -app - app.module.ts - app.component.ts - +home - home.module.ts - home.component.ts - home.component.html - create-report-card-form.component.ts - create-report-card-form.component.html - +<other "features"> - shared - shared.module.ts home.module import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {ReactiveFormsModule} from '@angular/forms'; import { SharedModule …

84 angular  typescript 

Angularがどのように構築され、舞台裏で実行されるかを知りたいだけですか？ 以下は私がこれまでに理解したことです。私が何かを逃したかどうか知りたいです。 Angularの構築方法 TypeScriptを使用してAngularアプリをコーディングした後、AngularCLIコマンドを使用してアプリをビルドします。 ng buildコマンドはアプリケーションを出力ディレクトリにコンパイルし、ビルドアーティファクトはdist/ディレクトリに保存されます。 内部プロセス 1. Angular CLIはWebpackを実行して、すべてのJavaScriptおよびCSSコードをビルドおよびバンドルします。 2. 次に、WebpackはTypeScriptローダーを呼び出します。TypeScriptローダー.tsはAngularプロジェクト内のすべてのファイルをフェッチし、それらをJavaScript、つまり.jsブラウザーが理解できるファイルに変換します。 この投稿によると、Angularには2つのコンパイラがあります。 コンパイラの表示 モジュールコンパイラ ビルドに関する質問 ビルドプロセスを呼び出すシーケンスは何ですか？ Angular CLIは、最初にTypeScript =>で記述されたAngular組み込みコンパイラを呼び出し、次にTypeScript Transpiler =>を呼び出し、次にWebpackを呼び出してディレクトリにバンドルして保存しdist/ます。 Angularの実行方法 ビルドが完了すると、アプリのすべてのコンポーネント、サービス、モジュールなどがJavaScript .js、ブラウザーでAngularアプリケーションを実行するために使用されるファイルにトランスパイルされます。 内の文角度ドキュメント あなたとブートストラップするときAppComponentのために（main.tsで）クラス、角度ルックス<app-root>でindex.html、それを見つけAppComponentのインスタンスをインスタンス化し、内部でそれをレンダリング<app-root>タグ。 Angularは、ユーザーがアプリケーション内を移動するときにコンポーネントを作成、更新、および破棄します。 ランニングに関する質問 が、main.ts角度のアプリは、ブートストラップやJavaScriptの使用開始されていないブートストラッププロセスを説明するために上の文で使用されている.jsファイルは？ 上記のすべてのステートメントは、JavaScript.jsファイルを使用して実行時に実行されませんか？ すべてのパーツがどのように深く組み合わされているか知っている人はいますか？

84 angular  typescript  build  angular-cli 

こんにちは私は401 unauthorized、トークンを更新してリクエストを再試行することで、新しい角度インターセプターを実装し、エラーを処理する方法を理解しようとしています。これは私がフォローしているガイドです：https：//ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors 失敗したリクエストを正常にキャッシュし、トークンを更新できますが、以前に失敗したリクエストを再送信する方法がわかりません。また、これを現在使用しているリゾルバーで機能させたいと思います。 token.interceptor.ts return next.handle( request ).do(( event: HttpEvent<any> ) => { if ( event instanceof HttpResponse ) { // do stuff with response if you want } }, ( err: any ) => { if ( err instanceof HttpErrorResponse ) { if ( err.status === 401 ) { …

84 javascript  angular  rxjs 

私はAngularプロジェクトに取り組んでいます。コンポーネントの更新アクションに苦労しています。 ボタンクリックでルーターのコンポーネントを更新したいと思います。更新ボタンをクリックすると、コンポーネント/ルーターを更新する必要があります。 私は試しましたがwindow.location.reload()、location.reload()これら2つは私のニーズには適していません。誰かがそれを知っているなら助けてください。

84 angular  routes  components  refresh 

現在のコマンド： ng serve --host --public $IP:$PORT 私のウェブサイトの結果： 無効なホストヘッダー

84 angular  angular-cli  c9.io 

クラスのcolorプロパティ（属性バインディングによって取得）をバインドして、background-colorのを設定しようとしていdivます。 import {Component, Template} from 'angular2/angular2'; @Component({ selector: 'circle', bind:{ "color":"color" } }) @Template({ url: System.baseURL + "/components/circle/template.html", }) export class Circle { constructor(){ } changeBackground():string{ return "background-color:" + this.color + ";"; } } 私のテンプレート： <style> .circle{ width:50px; height: 50px; background-color: lightgreen; border-radius: 25px; } </style> <div class="circle" [style]="changeBackground()"> <content></content> …

84 angular 

新しいタブでリンクを開く必要がある角度5コンポーネントがあります。次のことを試しました。 <a href="www.example.com" target="_blank">page link</a> リンクを開くと、アプリケーションが遅くなり、次のようなルートが開きます。 localhost:4200/www.example.com 私の質問は：これを角度で行う正しい方法は何ですか？

84 html  angular  routes  anchor 

ファイルをアップロードできるアップロードコンポーネントがあるアプリがあります。に埋め込まれていbody.componentます。 アップロード時BodyComponent.thefunction()に、親コンポーネントの関数（例）を使用する必要があります（データを更新するために呼び出しを実行します）。ただし、親が具体的にである場合に限りbody.componentます。アップロードは、動作が異なる他の場所でも使用される可能性があります。 のようなものparent(this).thefunction()、それを行う方法は？

83 angular 

ヘッダーにCORSを追加しましたが、リクエストでCORSの問題が発生します。ヘッダーにCORSやその他のリクエストを追加して処理する正しい方法は何ですか？ サービスファイルコードは次のとおりです。 import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http'; const httpOptions = { headers: new HttpHeaders({ 'Access-Control-Allow-Origin':'*', 'Authorization':'authkey', 'userid':'1' }) }; public baseurl = 'http://localhost/XXXXXX'; userAPI(data): Observable<any> { return this.http.post(this.baseurl, data, httpOptions) .pipe( tap((result) => console.log('result-->',result)), catchError(this.handleError('error', [])) ); } エラー： プリフライト要求への応答がアクセス制御チェックに合格しません：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http：// localhost：4200 'はアクセスを許可されていません 失敗：（不明なURL）のHTTP失敗応答：0不明なエラー サーバーサイドコードでは、インデックスファイルにCORSを追加しました。 header('Access-Control-Allow-Origin: …

83 angular  angular5 

私はアプリでAngular-CLI 1.6.6とを使用して@angular/service-worker 5.2.5いますAngular 5.2.5。本番環境で1つのエラーメッセージが表示されることを除いて、すべてがローカルのliteサーバーと本番サーバーで正常に機能します。 リソースのロードに失敗しました：サーバーはステータス504（ゲートウェイタイムアウト）で応答しました 探しているngsw-worker.jsエラーメッセージが上記生成される（以下2466）スクリプトIが発見行： async safeFetch(req) { try { return await this.scope.fetch(req); } catch (err) { this.debugger.log(err, `Driver.fetch(${req.url})`); return this.adapter.newResponse(null, { status: 504, statusText: 'Gateway Timeout', }); } } キャッチでのコンソールログエラーにより、次のエラーが発生します。 TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode at Driver.safeFetch (ngsw-worker.js:2464) …

83 angular  angular-cli  angular5  service-worker  angular-service-worker