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

--prodを使用してAngular 7プロジェクトをビルドすると、予算に警告が出ます。 Angular 7プロジェクトがありますが、ビルドしたいのですが、警告があります。 WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB これらはチャンクの詳細です： chunk {scripts} scripts.2cc9101aa9ed72da1ec4.js (scripts) 154 kB [rendered] chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.41 kB [entry] [rendered] chunk {1} main.13d1eb792af7c2f359ed.js (main) 3.34 MB [initial] [rendered] chunk {2} polyfills.11b1e0c77d01e41acbba.js (polyfills) 58.2 kB [initial] …

155 angular  build  production  ng-build 

次の2つのコンポーネントがあり、別のコンポーネントから関数を呼び出したいです。両方のコンポーネントは、ディレクティブを使用して3番目の親コンポーネントに含まれています。 コンポーネント1： @component( selector:'com1' ) export class com1{ function1(){...} } コンポーネント2： @component( selector:'com2' ) export class com2{ function2(){... // i want to call function 1 from com1 here } } 私が使って試してみた@inputと@output私はそれを使用する方法を正確に理解していないとどのようにその機能を呼び出すために、缶誰の助け？

154 angular  angular2-components 

Angularでは、次のようなフォームがあるかもしれません： <ng-form> <label>First Name</label> <input type="text" ng-model="model.first_name"> <label>Last Name</label> <input type="text" ng-model="model.last_name"> </ng-form> 対応するコントローラー内で、そのフォームの内容の変更を次のように簡単に監視できます。 function($scope) { $scope.model = {}; $scope.$watch('model', () => { // Model has updated }, true); } ここでJSFiddle上の角度例が。 Angularで同じことを達成する方法を理解するのに苦労しています。明らかに$scope、$ rootScope はもうありません。きっと同じことを成し遂げる方法はありますか？ これがPlunkerのAngularの例です。

151 angular 

私はAngularのウェブサイトでAngular 1から2のクイックリファレンスを読んでいますが、完全に理解できなかったのは、これらの特殊文字の違いです。たとえば、アスタリスクを使用するもの： <tr *ngFor="#movie of movies"> <td>{{movie.title}}</td> </tr> ハッシュ（＃）記号movieがローカルテンプレート変数として定義されていることをここで理解していますが、前のアスタリスクは何をngFor意味していますか？そして、それは必要ですか？ 次に、ブラケットを使用する例を示します。 <a [routerLink]="['Movies']">Movies</a> かっこで囲むrouterLinkと、そのHTML属性/ Angularディレクティブにバインドされます。これは、Angularが式を評価するためのポインタであることを意味しますか？などは[id]="movieId"相当だろうid="movie-{{movieId}}"アンギュラ1に？ 最後に、括弧は次のとおりです。 <button (click)="toggleImage($event)"> これらはDOMイベントにのみ使用されますか、(load)="someFn()"またはなどの他のイベントを使用でき(mouseenter)="someFn()"ますか？ 本当の質問は、これらの記号はAngular 2で特別な意味を持っているのでしょうか、それぞれをいつ使用するのかを知る最も簡単な方法は何ですか？ありがとう!!

151 angular 

<script>index.htmlにタグを直接追加せずに、追加のロジックと共に外部ライブラリをコンポーネント化するこのモジュールがあります。 import 'http://external.com/path/file.js' //import '../js/file.js' @Component({ selector: 'my-app', template: ` <script src="http://iknow.com/this/does/not/work/either/file.js"></script> <div>Template</div>` }) export class MyAppComponent {...} 私は気づかimportES6の仕様によっては、静的および活字体は、実行時にtranspilingではなく、中に解決です。 とにかく、それを構成可能にして、file.jsがCDNまたはローカルフォルダーから読み込まれるようにしますか？Angular 2にスクリプトを動的にロードするように指示するにはどうすればよいですか？

150 javascript  angular  typescript  ecmascript-6 

ng-container Angular 2のドキュメントで言及されていますが、それがどのように機能するか、そしてユースケースは何であるかについての説明はありません。 ngPluralとngSwitchディレクティブで特に言及されています。 DOESは<ng-container>同じことを行う<template>、またはそれは、ディレクティブがそれらのいずれかを使用するために書かれたかどうかによって決まり？ ある <ng-container *ngPluralCase="'=0'">there is nothing</ng-container> そして <template [ngPluralCase]="'=0'">there is nothing</template> 同じはず？ それらの1つをどのように選択しますか？ <ng-container>カスタムディレクティブでどのように使用できますか？

150 angular  typescript  angular2-template 

forループに配置したカスタムコンポーネントを作成しました。 <div *ngFor="let view of views"> <customcomponent></customcomponent> </div> その出力は次のようになります。 <customcomponent></customcomponent> <customcomponent></customcomponent> <customcomponent></customcomponent> これらのコンポーネントの数が変化する可能性がある場合に、@ viewchild構文またはその他の手段を使用してこれらのコンポーネントへの参照を取得する方法を知りたいです コンポーネントに名前を付けることができる場合（例： <customcomponent #compID></customcomponent> 次に、次のように参照できます。 @ViewChild('compID') test: CustomComponent これが当てはまらない場合、たとえばインデックスを使用するなど、どのように参照すればよいですか？ （この質問は、以下の回答からわかるように、以前に尋ねられた他の質問のようにElementRefを使用することとは関係ありません）この質問は、複数の@ViewChildへのアクセスとリストクエリの使用に関係します。

149 angular 

Angular-seedを使用してAngular 4プロジェクトをアップグレードしたところ、エラーが発生しました 合成プロパティ@panelStateが見つかりました。アプリケーションに「BrowserAnimationsModule」または「NoopAnimationsModule」のいずれかを含めてください。 どうすれば修正できますか？エラーメッセージは正確に何を教えてくれますか？

148 angular  typescript  angular-animations 

私は新しいとのAPIコールにクエリパラメータを渡す方法を探してきたHttpClientModuleのHttpClientと解決策を見つけるためには至っていません。古いHttpモジュールでは、次のように記述します。 getNamespaceLogs(logNamespace) { // Setup log namespace query parameter let params = new URLSearchParams(); params.set('logNamespace', logNamespace); this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params }) } これにより、次のURLへのAPI呼び出しが発生します。 localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace しかし、新しいHttpClient get()メソッドにはsearchプロパティがないので、クエリパラメーターで渡す場所を知りたいのですが？

147 angular  typescript  http  lodash  angular-httpclient 

カスタム要素があります： <div formControlName="surveyType"> <div *ngFor="let type of surveyTypes" (click)="onSelectType(type)" [class.selected]="type === selectedType"> <md-icon>{{ type.icon }}</md-icon> <span>{{ type.description }}</span> </div> </div> formControlNameを追加しようとすると、エラーメッセージが表示されます。 エラーエラー：名前が 'surveyType'のフォームコントロールに値アクセサーがありません 追加ngDefaultControlに失敗しました。それは入力/選択がないためだと思われます...そして私は何をすべきか分かりません。 私のクリックをこのformControlにバインドして、誰かがカード全体をクリックしたときに私の「タイプ」がformControlにプッシュされるようにします。出来ますか？

146 javascript  angular  typescript  angular4-forms 

JSON次のようなファイルがあります。 { "primaryBright": "#2DC6FB", "primaryMain": "#05B4F0", "primaryDarker": "#04A1D7", "primaryDarkest": "#048FBE", "secondaryBright": "#4CD2C0", "secondaryMain": "#00BFA5", "secondaryDarker": "#009884", "secondaryDarkest": "#007F6E", "tertiaryMain": "#FA555A", "tertiaryDarker": "#F93C42", "tertiaryDarkest": "#F9232A", "darkGrey": "#333333", "lightGrey": "#777777" } .tsxファイルにインポートしようとしています。このために、これをタイプ定義に追加しました： declare module "*.json" { const value: any; export default value; } そして、私はそれをこのようにインポートしています。 import colors = require('../colors.json') そして、ファイルでは、色をprimaryMainとして使用していcolors.primaryMainます。ただし、エラーが発生します。 プロパティ 'primaryMain'はタイプ 'typeof …

146 json  angular  typescript  angular8 

私はangular2を開発に使用してng-disabledおり、angular2の代わりになるものがないかと思っていました。 例のために。以下のコードはangularJSにあります： <button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >> {{libraries.name}}"> <i class="fa fa-chevron-right fa-fw"></i> </button> どうすればこの機能を実現できますか？入力はありますか？

145 angular  angular-directive 

Angular 4.1.0コンポーネントをテストしようとしています- export class CellComponent implements OnInit { lines: Observable<Array<ILine>>; @Input() dep: string; @Input() embedded: boolean; @Input() dashboard: boolean; constructor( public dataService: CellService, private route: ActivatedRoute, private router: Router, private store: Store<AppStore>) { } } ただし、単純な「should create」テストでは、この不可解なエラーがスローされます... NetworkError：「XMLHttpRequest」で「send」を実行できませんでした：「ng：///DynamicTestModule/module.ngfactory.js」をロードできませんでした。 だから私はこの質問を見つけました、それは問題がコンポーネントが@Input)_設定されていないparamsを持っていることを示唆しています、しかし私が私のように私のテストを変更した場合： it('should create', inject([CellComponent], (cmp: CellComponent) => { cmp.dep = ''; cmp.embedded …

145 angular  unit-testing  karma-jasmine  angular-cli 

Angularアプリケーションでアプリのバージョンを表示するにはどうすればよいですか？バージョンはpackage.jsonファイルから取得する必要があります { "name": "angular-app", "version": "0.0.1", ... } angular 1.xでは、私はこのhtmlを持っています： <p><%=version %></p> Angularでは、これはバージョン番号としてレンダリングされず、そのまま（の<%=version %>代わりに0.0.1）そのまま印刷されます。

145 version  angular  package.json 

最近、私はangular 2で遊んでいます。それは今のところ素晴らしいです。それで、を使用して学習するために、個人的なデモプロジェクトを開始しましたangular-cli。 基本的なルーティング設定で、ヘッダーからいくつかのルートに移動したいのですが、私のヘッダーはの親なので、router-outletこのエラーが発生します。 app.component.html <app-header></app-header> // Trying to navigate from this component <router-outlet></router-outlet> <app-footer></app-footer> header.component.html <a [routerLink]="['/signin']">Sign in</a> 今では部分的に理解していますが、そのコンポーネントはラッパーであるため、router-outletこの方法でアクセスすることはできないと思いますrouter。では、このようなシナリオで外部からナビゲーションにアクセスする可能性はありますか？ 必要に応じて、さらに情報を追加させていただきます。前もって感謝します。 更新 1-私はpackage.jsonすでに安定@angular/router 3.3.1版を持っています。2-メインappモジュールで、をインポートしましたrouting-module。下記を参照してください。 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { …

145 angular  typescript  angular2-routing