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

GoogleのウェブフレームワークであるAngular（AngularJSと混同しないでください）に関する質問。このタグは、個々のバージョンに固有ではないAngularの質問に使用します。古いAngularJS（1.x）Webフレームワークの場合は、angularjsタグを使用します。

2
Angularコンポーネントの「プライベート」と「パブリック」
、、、およびの前にプライベートを追加しない場合、デフォルトでパブリックであると思います。fooloadBartext export class RandomComponent { @Input() foo: string; @Output() loadBar = new EventEmitter(); text: string; } それらがpublicコンポーネント内にあるときにユースケースはありますか？ カプセル化/セキュリティ上の理由から、private以下のようにそれらすべてを常に追加する必要がありますか？ export class RandomComponent { @Input() private foo: string; @Output() private loadBar = new EventEmitter(); private text: string; } ありがとう
23
Angular + Material-データソースを更新する方法（マットテーブル）
マットテーブルを使用して、ユーザーが選択した言語のコンテンツを一覧表示しています。ダイアログパネルを使用して新しい言語を追加することもできます。彼らは言語を追加して戻った後。データソースを更新して、行った変更を表示します。 サービスからユーザーデータを取得し、refreshメソッドでデータソースに渡すことにより、データストアを初期化します。 Language.component.ts import { Component, OnInit } from '@angular/core'; import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model'; import { LanguageAddComponent } from './language-add/language-add.component'; import { AuthService } from '../../../../services/auth.service'; import { LanguageDataSource } from './language-data-source'; import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component'; import { DataSource } from '@angular/cdk/collections'; import { Observable …
13
サーブまたはFirebaseサーブの終了方法
私はAngular2でWeb開発を行っており、Angular2とFirebaseの両方を使用してローカルサーバーを実行しています。Ionicを使用してサーバーを作成するときに「quit」と入力するのと同じようなコマンドを見つけることができなかったため、毎回ターミナルタブを閉じる必要があります。サーバーを終了して端末のタブを元に戻す方法はありますか？ ありがとう。
11
角度2に格納された配列から項目を削除します
Type Scriptを使用して、角度2で格納された配列からアイテムを削除したいと思います。Data Serviceと呼ばれるサービス、 DataServiceコードを使用しています： export class DataService { private data: string[] = []; addData(msg: string) { this.data.push(msg); } getData() { return this.data; } deleteMsg(msg: string) { delete [this.data.indexOf(msg)]; } } そして私のコンポーネントクラス： import {Component} from '@angular/core' import {LogService} from './log.service' import {DataService} from './data.service' @Component({ selector: 'tests', template: ` <div class="container"> …
11
Angular 2兄弟コンポーネント通信
ListComponentがあります。ListComponentでアイテムをクリックすると、そのアイテムの詳細がDetailComponentに表示されます。両方が同時に画面に表示されるため、ルーティングは必要ありません。 ListComponentのどのアイテムがクリックされたかをDetailComponentに通知するにはどうすればよいですか？ 親（AppComponent）までイベントを発行することを検討し、@ Inputを使用して親にDetailComponentのselectedItem.idを設定させました。または、監視可能なサブスクリプションで共有サービスを使用することもできます。 編集：ただし、追加のコードを実行する必要がある場合に備えて、イベント+ @Inputを介して選択したアイテムを設定しても、DetailComponentはトリガーされません。したがって、これが許容できるソリューションであるかどうかはわかりません。 しかし、これらの方法はどちらも、$ rootScope。$ broadcastまたは$ scope。$ parent。$ broadcastを介したAngular 1の方法よりもはるかに複雑に見えます。 Angular 2のすべてがコンポーネントであるため、コンポーネントの通信についてこれ以上の情報がないことに驚きます。 これを達成する別の/より簡単な方法はありますか？
5
Angular 2を使用したHTML5イベント処理（onfocusおよびonfocusout）
日付フィールドがあり、デフォルトでプレースホルダーを削除したい。 プレースホルダーを削除するためにJavaScript onfocusとonfocusoutイベントを使用しています。 angular2ディレクティブの使用を手伝ってくれる人はいますか？ <input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput"> 私はこの方法で解決しようとしていますが、入力フィールドタイプのリセットで問題が発生しています。 import { Directive, ElementRef, Input } from 'angular2/core'; @Directive({ selector: '.dateinput', host: { '(focus)': 'setInputFocus()', '(focusout)': 'setInputFocusOut()', }}) export class MyDirective { constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);} setInputFocus(): void { //console.log(this.elementRef.nativeElement.value); } }
118 angular 
9
Angular 4でのリアルタイムのウィンドウサイズ変更の検出
私はレスポンシブなナビゲーションバーを構築しようとしており、メディアクエリを使用したくないので*ngIF、ウィンドウサイズを基準として使用するつもりです。しかし、Angular 4のウィンドウサイズの検出に関する方法やドキュメントが見つからないため、問題に直面しています。JavaScriptメソッドも試しましたが、サポートされていません。 私は以下も試しました： constructor(platform: Platform) { platform.ready().then((readySource) => { console.log('Width: ' + platform.width()); console.log('Height: ' + platform.height()); }); } ...これはイオンで使用されました。 そしてscreen.availHeight、まだ成功していません。
118 html  angular  dom-events 
15
複数のフォームフィールドに依存するAngular2バリデーター
複数の値を使用してフィールドが有効かどうかを判断できるバリデーターを作成することはできますか？ たとえば、顧客の希望する連絡方法が電子メールの場合、電子メールフィールドは必須です。 ありがとう。 サンプルコードで更新... import {Component, View} from 'angular2/angular2'; import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; @Component({ selector: 'customer-basic', viewInjector: [FormBuilder] }) @View({ templateUrl: 'app/components/customerBasic/customerBasic.html', directives: [formDirectives] }) export class CustomerBasic { customerForm: ControlGroup; constructor(builder: FormBuilder) { this.customerForm = builder.group({ firstname: [''], lastname: [''], validateZip: ['yes'], zipcode: ['', this.zipCodeValidator] // …
118 angular 
6
TypeScriptのタイプEventTargetにプロパティ 'value'が存在しません
したがって、次のコードはAngular 4に含まれており、期待どおりに機能しない理由を理解できません。 これが私のハンドラのスニペットです： onUpdatingServerName(event: Event) { console.log(event); this.newserverName = event.target.value; //this wont work } HTML要素： <input type="text" class="form-control" (input)="onUpdatingServerName($event)"> コードは私にエラーを与えます： プロパティ「値」はタイプ「EventTarget」に存在しません。 しかし、それからわか​​るように、console.logその値はに存在しますevent.target。
16
コンポーネントは2つのモジュールの宣言の一部です
Ionic 2アプリを作成してみます。イオンサーブを使用してブラウザでアプリを試すか、エミュレータで起動すると、すべて正常に動作します。 しかし、エラーが発生するたびにビルドしようとすると ionic-app-script tast: "build" Error Type AddEvent in "PATH"/add.event.ts is part of the declarations of 2 modules: AppModule in "PATH"/app.modules.ts and AddEvent in "PATH"/add-event.module.ts. Please consider moving AddEvent in "PATH"/add-event.ts to a higher module that imports AppModule in "PATH"/app.module.ts and AddEventModule. You can also creat a new NgModule …
11
RouterLinkが機能しない
angular2アプリでのルーティングはうまくいきます。しかし、これに基づいてrouteLinkを作成します： これが私のルーティングです： const routes: RouterConfig = [ { path:'home' , component: FormComponent }, { path:'about', component: AboutComponent }, { path:'**' , component: FormComponent } ]; そしてここに私が作ったリンクがあります： <ul class="nav navbar-nav item"> <li> <a routerLink='/home' routerLinkActive="active">Home</a> </li> <li> <a routerLink='/about' routerLinkActive="active">About this</a> </li> </ul> 私はそれらをクリックすると、尊敬されるコンポーネントに移動しますが、何も実行しないと思いますか？
16
反応型の入力フィールドを無効にする
私はすでにここから他の答えの例を試そうとしましたが、成功しませんでした！ リアクティブフォーム（動的）を作成し、いくつかのフィールドを常に無効にしたいと考えています。私のフォームコード： this.form = this._fb.group({ name: ['', Validators.required], options: this._fb.array([]) }); const control = <FormArray>this.form.controls['options']; control.push(this._fb.group({ value: [''] })); 私のhtml： <div class='row' formArrayName="options"> <div *ngFor="let opt of form.controls.options.controls; let i=index"> <div [formGroupName]="i"> <select formArrayName="value"> <option></option> <option>{{ opt.controls.value }}</option> </select> </div> </div> </div> 簡単にするためにコードを減らしました。タイプ選択のフィールドを無効にしたい。私は次のことを試みました： form = new FormGroup({ first: new FormControl({value: …
117 angular 
4
Angular 4/5/6グローバル変数
私のAngular 2アプリケーションでグローバル変数を作成することに本当に苦労しています。 私は既にググって、過去3時間にわたってこれに関するStackOverflowの多くの投稿を読んでいましたが、それを機能させることができないようです。あなたが私を助けてくれることを本当に願っています、そして私はこの質問をすることをお詫び申し上げます。 したがって、globals.tsというファイルがあり、次のようになります。 import { Injectable } from "@angular/core"; @Injectable() export class Globals { var role = 'test'; } 次のように、コンポーネントのHTMLビューで変数ロールを使用したいと思います。 {{ role }} 次の方法で、globals.tsファイルをapp.module.tsにすでに追加しています。 providers: [ Globals ], このファイルで何をしても、機能しませんでした。私がしたくないのは、すべてのコンポーネントのglobals.tsファイルを手動でインポートする必要があることです。そのため、プロバイダー機能を使用します。 あなたが私を助けてまた申し訳ないことを本当に願っています。 宜しくお願いします、 AE
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.