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


10
Angular 5-クリップボードにコピー
クリックすると変数をユーザーのクリップボードに保存するアイコンを実装しようとしています。私は現在いくつかのライブラリを試しましたが、どれもできませんでした。 Angular 5で変数をユーザーのクリップボードに正しくコピーするにはどうすればよいですか?

12
<input>要素にフォーカスを設定します
Angular 5でフロントエンドアプリケーションを使用しています。検索ボックスを非表示にする必要がありますが、ボタンをクリックすると、検索ボックスが表示され、フォーカスが移動します。 StackOverflowで見つかったいくつかの方法をディレクティブなどで試しましたが、成功しません。 サンプルコードは次のとおりです。 @Component({ selector: 'my-app', template: ` &lt;div&gt; &lt;h2&gt;Hello&lt;/h2&gt; &lt;/div&gt; &lt;button (click) ="showSearch()"&gt;Show Search&lt;/button&gt; &lt;p&gt;&lt;/p&gt; &lt;form&gt; &lt;div &gt; &lt;input *ngIf="show" #search type="text" /&gt; &lt;/div&gt; &lt;/form&gt; `, }) export class App implements AfterViewInit { @ViewChild('search') searchElement: ElementRef; show: false; name:string; constructor() { } showSearch(){ this.show = !this.show; this.searchElement.nativeElement.focus(); alert("focus"); …

8
PromiseまたはObservableを返すと予想されるバリデーター
Angular 5でカスタム検証を行おうとしていますが、次のエラーが発生しています Expected validator to return Promise or Observable 値が必要なものと一致しない場合、フォームにエラーを返したいだけです。コードは次のとおりです。 これは私のフォームであるコンポーネントです constructor(fb: FormBuilder, private cadastroService:CadastroService) { this.signUp = fb.group({ "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])], "email": ["", Validators.compose([Validators.required, Validators.email])], "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])], "cpf": ["", Validators.required, ValidateCpf] }) } このコードは、実装したい検証を含むファイルにあります。 import { AbstractControl } from '@angular/forms'; export function ValidateCpf(control: AbstractControl){ if (control.value …

3
Angular6-サービスインジェクションではなく@ngrx / storeを使用する理由
私は最近、@ ngrx / storeでAngular6を学習していますが、チュートリアルの1つは状態管理に@ ngrx / storeを使用することですが、@ ngrx / storeを舞台裏で使用する利点を理解していません。 たとえば、単純なログインおよびサインアップアクションの場合、以前はサービス(AuthServiceと呼びましょう)を使用して、バックエンドAPIを呼び出し、AuthServiceに「userInfo」または「token」を格納し、ユーザーを「HOME」にリダイレクトします。ページを開くと、DIを使用してuserInfoを取得する必要がある任意のコンポーネントにAuthServiceを挿入できます。これは、1つのファイルAuthServiceがすべてを処理するだけです。 @ ngrx / storeを使用している場合、上記のアクションまたはイベントを処理するためにおそらく4つまたは5つのファイルに書き込む必要があるAction / State / Reducer / Effects / Selectorを定義する必要がありますが、それでもバックエンドAPIを呼び出す必要がある場合がありますはるかに複雑で冗長に見えるサービスを使用しています... 他のシナリオでは、一部のページで@ ngrx / storeを使用して、オブジェクトまたはグリッドデータなどのオブジェクトのリストを格納していることもあります。、それはある種のインメモリストアの使用のためですか? では、質問に戻りましょう。Angularプロジェクトでサービス登録ストアよりも@ ngrx / storeを使用しているのはなぜですか? 「状態管理」用であることは知っていますが、「状態管理」とは正確には何ですか?それはトランザクションログのようなものですか、いつ必要ですか?なぜフロントエンドで管理するのでしょうか。@ ngrx / storeエリアであなたの提案や経験を自由に共有してください!

7
Angular5のヘッダーにCORSリクエストを追加する方法
ヘッダーに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&lt;any&gt; { return this.http.post(this.baseurl, data, httpOptions) .pipe( tap((result) =&gt; console.log('result--&gt;',result)), catchError(this.handleError('error', [])) ); } エラー: プリフライト要求への応答がアクセス制御チェックに合格しません:要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' http:// localhost:4200 'はアクセスを許可されていません 失敗:(不明なURL)のHTTP失敗応答:0不明なエラー サーバーサイドコードでは、インデックスファイルにCORSを追加しました。 header('Access-Control-Allow-Origin: …
83 angular  angular5 

1
Angular Service Worker-リソースの読み込みに失敗しました:サーバーがステータス504(ゲートウェイタイムアウト)で応答しました
私はアプリで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) …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.