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

ViewChildを試行すると、エラーが発生します。エラーは、「 'opts'の引数が指定されていませんでした。」 @ViewChildの両方がエラーを出しています。 import { Component, OnInit, ElementRef, ViewChild, Output, EventEmitter } from '@angular/core'; import { Ingredient } from 'src/app/shared/ingredient.model'; @Component({ selector: 'app-shopping-edit', templateUrl: './shopping-edit.component.html', styleUrls: ['./shopping-edit.component.css'] }) export class ShoppingEditComponent implements OnInit { @ViewChild('nameInput') nameInputRef: ElementRef; @ViewChild('amountInput') amountInputRef: ElementRef; @Output() ingredientAdded = new EventEmitter<Ingredient>(); constructor() {} ngOnInit() { } …

249 angular  typescript 

回答が承認された回答である場合、チェックマークを表示しようとしています： template: `<div ngIf="answer.accepted">✔</div>` しかし、私はこのエラーを受け取ります： EXCEPTION: No provider for TemplateRef! (NgIf ->TemplateRef) 何が悪いのですか？

247 angular  angular2-template 

Angularで委任パターンのようなものを実装しようとしています。ユーザーがをクリックnav-itemすると、次にイベントをリッスンする関数を呼び出して、イベントをリッスンする他のコンポーネントによって処理されるイベントを生成したいと思います。 これがシナリオです：私はNavigationコンポーネントを持っています： import {Component, Output, EventEmitter} from 'angular2/core'; @Component({ // other properties left out for brevity events : ['navchange'], template:` <div class="nav-item" (click)="selectedNavItem(1)"></div> ` }) export class Navigation { @Output() navchange: EventEmitter<number> = new EventEmitter(); selectedNavItem(item: number) { console.log('selected nav item ' + item); this.navchange.emit(item) } } これが観測コンポーネントです： export class …

243 angular  observer-pattern  observable  eventemitter  event-delegation 

Angular 2を学習しようとしています。 @ViewChildアノテーションを使用して、親コンポーネントから子コンポーネントにアクセスしたいと思います。 ここにいくつかのコード行： でBodyContent.ts私が持っています： import {ViewChild, Component, Injectable} from 'angular2/core'; import {FilterTiles} from '../Components/FilterTiles/FilterTiles'; @Component({ selector: 'ico-body-content' , templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html' , directives: [FilterTiles] }) export class BodyContent { @ViewChild(FilterTiles) ft:FilterTiles; public onClickSidebar(clickedElement: string) { console.log(this.ft); var startingFilter = { title: 'cognomi', values: [ 'griffin' , 'simpson' ]} this.ft.tiles.push(startingFilter); } …

241 typescript  angular 

Angular 2でマウスイベントの伝播を停止する最も簡単な方法は何ですか？特別な$eventオブジェクトを渡してstopPropagation()自分を呼び出すか、他の方法がありますか？たとえばMeteorではfalse、イベントハンドラーから単純に戻ることができます。

238 angular  dom-events  event-propagation 

私はangular2.0.0-beta.7を使用しています。コンポーネントがに/path?query=value1リダイレクトされるようなパスにロードされたとき/path。GETパラメータが削除されたのはなぜですか？パラメータを保持するにはどうすればよいですか？ ルーターにエラーがあります。のようなメインルートがある場合 @RouteConfig([ { path: '/todos/...', name: 'TodoMain', component: TodoMainComponent } ]) と私の子供のルートのような @RouteConfig([ { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true }, { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' } ]) その後、TodoListComponentでパラメータを取得できません。私は得ることができます params("/my/path;param1=value1;param2=value2") でもクラシックが欲しい query params("/my/path?param1=value1&param2=value2")

237 typescript  angular 

私たちは、angular-cli 1.0.0-beta.5（w / node v6.1.0）で生成されたアプリでブートストラップ4（4.0.0-alpha.2）を使用したいと思います。 npmでブートストラップとその依存関係を取得した後、最初のアプローチはそれらをangular-cli-build.js次の場所に追加することでした。 'bootstrap/dist/**/*.min.+(js|css)', 'jquery/dist/jquery.min.+(js|map)', 'tether/dist/**/*.min.+(js|css)', にインポートします index.html <script src="vendor/jquery/dist/jquery.min.js"></script> <script src="vendor/tether/dist/js/tether.min.js"></script> <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"> <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script> これは問題ng serveなく動作しましたが、-prodフラグ付きのビルドを作成するとすぐに、これらの依存関係はすべてなくなりましたdist/vendor（驚き！）。 angular-cliで生成されたプロジェクトでこのようなシナリオ（つまり、ブートストラップスクリプトの読み込み）をどのように処理することを意図していますか？ 次のような考えがありましたが、どちらに進むべきか本当にわかりません... CDNを使用しますか？しかし、これらのファイルが利用可能になることを保証するために、むしろこれらのファイルを提供します 依存関係をdist/vendor私たちの後にコピーしますng build -prodか？しかし、ビルド部分を「処理する」ので、angular-cliが提供するもののように思えますか？ jquery、ブートストラップ、テザーを追加しsrc/system-config.ts、どういうわけかそれらをバンドルに追加しmain.tsますか？しかし、アプリケーションのコードでそれらを明示的に使用しないことを考えると、それは間違っているように見えました（たとえば、moment.jsやlodashのようなものとは異なります）。

234 angular  twitter-bootstrap  angular-cli  ngx-bootstrap 

https://material.angular.io/components/component/dialogのドキュメントをフォローしようとしていますが、以下の問題がある理由を理解できません。 私はコンポーネントに以下を追加しました： @Component({ selector: 'dialog-result-example-dialog', templateUrl: './dialog-result-example-dialog.html', }) export class DialogResultExampleDialog { constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {} } 私のモジュールに追加しました import { HomeComponent,DialogResultExampleDialog } from './home/home.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent, HomeComponent, DialogResultExampleDialog ], // ... それでも私はこのエラーを受け取ります... EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory …

232 angular  angular-material 

ウィンドウのサイズ変更イベント（ロード時および動的）に基づいていくつかのタスクを実行したいと思います。 現在、私は次のように私のDOMを持っています： <div id="Harbour"> <div id="Port" (window:resize)="onResize($event)" > <router-outlet></router-outlet> </div> </div> イベントは正しく発生します export class AppComponent { onResize(event) { console.log(event); } } このイベントオブジェクトから幅と高さを取得するにはどうすればよいですか？ ありがとう。

232 javascript  angular 

「ng-bootstrap」と「ngx-bootstrap」の違いは何ですか？それらは互いに関連していますか？それとも、それらは単に並行実装ですか？ 誰かが彼らと一緒に働いて、両方の長所と短所を与えたり説明したりできますか？ 「ng-bootstrap」とは、https：//ng-bootstrap.github.io/#/homeおよび 「ngx-bootstrap」とは、http： //valor-software.com/ngx-bootstrap/を意味します。 Angular 4（AngularJSではない！）とBootstrap 4の両方に関連しています。 これは、ngx-bootstrapとng2 bootstrapの違いの重複した質問ではないことに注意してください。。

231 angular  ng-bootstrap  ngx-bootstrap 

私はそれをtypescriptバインディングで使用しようとしました： npm install moment --save typings install moment --ambient -- save test.ts： import {moment} from 'moment/moment'; そしてなし： npm install moment --save test.ts： var moment = require('moment/moment'); しかし、moment.format（）を呼び出すと、エラーが発生します。簡単なはずですが、誰もが機能するコマンドライン/インポートの組み合わせを提供できますか？

231 typescript  angular 

Angular 4アプリをテストするためのモックWebサービスを構築するために使用するものはどれですか？

229 angular  angular-httpclient  angular2-http 

私が使用しようとするとdata attribute、私の中でtemplateこのように、： <ol class="viewer-nav"> <li *ngFor="#section of sections" data-value="{{ section.value }}"> {{ section.text }} </li> </ol> Angular 2 クラッシュする： 例外：テンプレート解析エラー：既知のネイティブプロパティではないため、「sectionvalue」にバインドできません（ " ] data-sectionvalue = "{{section.value}}"> {{section.text}} 構文に明らかに何か欠けています。助けてください。

229 angular  angular2-template 

リントエラーメッセージ： src / app / detail / edit / edit.component.ts [111、5]：for（... in ...）ステートメントは、ifステートメントでフィルタリングする必要があります コードスニペット（これは動作するコードです。angular.ioフォーム検証セクションでも入手できます）： for (const field in this.formErrors) { // clear previous error message (if any) this.formErrors[field] = ''; const control = form.get(field); if (control && control.dirty && !control.valid) { const messages = this.validationMessages[field]; for (const key in control.errors) …

229 angular  angular2-forms  angular-cli  tslint 

「ng destroy component foo」を使用してみましたが、「destroyコマンドはAngular-CLIでサポートされていません」と表示されます Angular CLIでコンポーネントを適切に削除するにはどうすればよいですか？

227 angular  angular-cli