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

角度のあるフロントエンドを備えたmvc5プロジェクトがあります。このチュートリアルhttps://angular.io/guide/routerで説明されているように、ルーティングを追加したいと思いました。だから私の中_Layout.cshtmlに追加しました <base href="/"> app.moduleでルーティングを作成しました。しかし、これを実行すると、次のエラーが発生します。 Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. …

98 angular  typescript  asp.net-mvc-5  angular2-routing 

ルーターのコンセントによって配置された要素を角度でスタイリングしようとしていますが、生成された要素の幅が100％になるようにします ほとんどの返信から、::ng-deepセレクターを使用する必要があることがわかりましたが、Angularのドキュメントからは非推奨になっています。に代わるものはあり::ng-deepますか？

98 html  css  angular 

角度のあるマテリアルをインストールしました。 アプリモジュールMatIconModuleにインポートしました（とimport { MatIconModule } from '@angular/material/icon';） ngmoduleのインポートの下に次のように追加しました。 @NgModule({ imports: [ //... MatIconModule, //... すべてのスタイルシートをインポートしました また、実際に（使用しようとしている）アプリコンポーネントにインポートしました（import {MatIconModule} from '@angular/material/icon';先頭に別の行があります）。 ただし、マテリアルアイコンはまだ表示されません。 たとえば、次の行を使用します。 <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button> 私はこのようなものを期待しています： しかし、私はこれを取得します： 何か提案がありますか？

98 angular  angular-material  angular-material2 

コンポーネントEventEmitterにがありますが、エラーがスローされるため、コンパイルできません。 提供されたパラメータがコールターゲットのシグネチャと一致しません 私のコンポーネント： @Output() addModel = new EventEmitter<any>(); saveModel($event, make, name) { this.addModel.emit(make, name); } その中のパラメータの1つを削除this.addModel.emit()するEventEmitterと機能しますが、2つのパラメータをに渡すことは可能ですか？

98 angular  eventemitter 

Angularは初めてです。私はそれを学ぶために英雄ツアーを始めました。だから、私はバインディングapp.component付きで作成されていtwo-wayます。 import { Component } from '@angular/core'; export class Hero { id: number; name: string; } @Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>{{hero.name}} details!</h2> <div><label>id: </label>{{hero.id}}</div> <div><label>Name: </label> <input [(ngModel)]="hero.name" placeholder="Name"> </div> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; hero: Hero = { id: …

97 angular 

私は上の変化を検出しようとしていますngModelで<select>タグ。Angular 1.xでは、$watchon ngModelを使用して、またはを使用してこれを解決するngChange場合がありますがngModel、Angular 2での変更を検出する方法はまだわかりません。 完全な例：http : //plnkr.co/edit/9c9oKH1tjDDb67zdKmr9?p=info import {Component, View, Input, } from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; @Component({ selector: 'my-dropdown' }) @View({ directives: [FORM_DIRECTIVES], template: ` <select [ngModel]="selection" (ngModelChange)="onChange($event, selection)" > <option *ngFor="#option of options">{{option}}</option> </select> {{selection}} ` }) export class MyDropdown { @Input() options; selection = 'Dog'; ngOnInit() …

97 javascript  angular 

このコードをAngualr 1からAngular 2に変換できません。 ng-repeat="todo in todos | orderBy: 'completed'" これは私がティエリーテンプリエの答えに従って行ったことです： コンポーネントテンプレート： *ngFor="#todo of todos | sort" コンポーネントコード： @Component({ selector: 'my-app', templateUrl: "./app/todo-list.component.html", providers: [TodoService], pipes: [ TodosSortPipe ] }) パイプコード： import { Pipe } from "angular2/core"; import {Todo} from './todo'; @Pipe({ name: "sort" }) export class TodosSortPipe { transform(array: Array<Todo>, …

97 angular  angular2-template  angular-pipe 

ボディをアプリセレクターにしてホストバインディングを使用せずに、ボディタグにクラスを追加するにはどうすればよいですか？ レンダラーを使ってみましたが、全身が変わります bodyタグのAngular 2.xバインドクラス 私は大きなangular2アプリで作業していて、ルートセレクターを変更すると多くのコードに影響し、多くのコードを変更する必要があります 私のユースケースはこれです： 動的に作成されたモーダルコンポーネントを開くと、ドキュメントのスクロールバーを非表示にしたい

97 angular 

私はすべてのいくつかのサービスが注入されるはずのangular2コンポーネントのセットを持っています。私が最初に思ったのは、スーパークラスを作成し、そこにサービスを注入するのが最善だと思いました。次に、私のコンポーネントのいずれかがそのスーパークラスを拡張しますが、このアプローチは機能しません。 簡略化した例： export class AbstractComponent { constructor(private myservice: MyService) { // Inject the service I need for all components } } export MyComponent extends AbstractComponent { constructor(private anotherService: AnotherService) { super(); // This gives an error as super constructor needs an argument } } これを解決するにはMyService、すべてのコンポーネント内に注入し、その引数をsuper()呼び出しに使用しますが、これは明らかに不合理なことです。 スーパークラスからサービスを継承するようにコンポーネントを正しく整理するにはどうすればよいですか？

97 inheritance  angular  typescript  inject  typescript1.8 

私が使用しているReactiveFormsModuleフォームが含まれているコンポーネントを作成するAngular2の。これが私のコードです： foo.component.ts： constructor(fb: FormBuilder) { this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [] }); } foo.component.html（と[formControl]）： <div class="fields"> <div class="field"> <label>Fullname*</label> <input type="text" [formControl]="myForm.controls.fullname"/> </div> </div> <div class="inline fields"> <label for="gender">Gender</label> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> <label>Male</label> </div> </div> <div class="field"> <div …

97 angular  radio-button  angular2-forms  form-control  angular2-formbuilder 

のdisabled属性を使用しようとしていますformControl。私がそれをテンプレートに入れると、うまくいきます： <md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input> しかし、ブラウザは私に警告します： 無効属性を反応フォームディレクティブで使用しているようです。コンポーネントクラスでこのコントロールを設定するときにdisabledをtrueに設定すると、disabled属性が実際にDOMに設定されます。この方法を使用して、「チェック後に変更」エラーを回避することをお勧めします。 Example: form = new FormGroup({ first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), last: new FormControl('Drew', Validators.required) }); だから私はそれを FormControl、テンプレートから削除しました： constructor(private itemsService: ItemsService) { this._items = []; this.myForm = new FormGroup({ id: new FormControl({value: '', disabled: true}, Validators.required), title: new FormControl(), description: new FormControl() …

97 angular  typescript 

私はこのブログをフォローしているため、本番用のangular2アプリケーションを構築しようとしています。ngcのコンパイルが成功した後、tsc コンパイルが行われると、次の画像に示すエラーが生成されます。 しばらく検索したところ、「コンテキストプロパティ」セクションの問題を説明しているこのブログを見つけましたが、正しく理解できなかったため、何がおかしいのかよくわかります。基本的に、変数をプライベートにすると、「エラー：プロパティはプライベートであり、クラス内でのみアクセス可能」になります。なぜそれが来るのか理解できません。 過去数日間この問題に頭を悩ませているので、親切に助けてください。

97 angular  typescript  typescript-typings  angular2-aot 

markAsDirty内のすべてのコントロールを実行したいと思いFormGroupます。

97 angular 

要素内で動的 テンプレート参照変数を宣言するにはどうすればよいngForですか？ ng-bootstrapのポップオーバーコンポーネントを使用したいのですが、ポップオーバーコード（Htmlバインディングを使用）は次のようになります。 <ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template> <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content"> I've got markup and bindings in my popover! </button> これらの要素を内部にラップするにはどうすればよいngForですか？ <div *ngFor="let member of members"> <!-- how to declare the '????' --> <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template> <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content"> I've got markup and bindings …

97 angular  ng-bootstrap  angular-template 

Observableが存在する関数から返される値をObservableから抽出する方法がわかりません。返される値だけが必要です。それ以外は必要ありません。 動作する現在のバージョン function getValueFromObservable() { this.store.subscribe( (data:any) => { console.log(data) } ) } getValueFromObservable() これが機能し、値を返す関数が必要です： function getValueFromObservable() { this.store.subscribe( (data:any) => { return data } ) } console.log(getValueFromObservable()) ここで何が悪いのですか？

96 typescript  angular  rxjs  rxjs5