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

特定の条件下で表示したい要素がいくつかあります。 AngularJSで私は書くでしょう <div ng-show="myVar">stuff</div> Angular 2+でこれを行うにはどうすればよいですか？

570 angular  angular-components  angular-template 

コンポーネントテンプレートで定義された要素を取得する方法を知っている人はいますか？Polymerは、$とを使用して非常に簡単になり$$ます。 Angularでそれをどうやってやろうかと思っていたところです。 チュートリアルの例を見てみましょう： import {Component} from '@angular/core'; @Component({ selector:'display', template:` <input #myname (input)="updateName(myname.value)"/> <p>My name : {{myName}}</p> ` }) export class DisplayComponent { myName: string = "Aman"; updateName(input: String) { this.myName = input; } } クラス定義内からpまたはinput要素の参照をキャッチまたは取得するにはどうすればよいですか？

516 angular  typescript  angular-components 

親コンポーネントがあります： <parent></parent> そして、私はこのグループに子コンポーネントを入れたいです： <parent> <child></child> <child></child> <child></child> </parent> 親テンプレート： <div class="parent"> <!-- Children goes here --> <ng-content></ng-content> </div> 子テンプレート： <div class="child">Test</div> 以来parentとchild2つの別々のコンポーネントである、彼らのスタイルは、独自のスコープにロックされています。 私の親コンポーネントで私はやってみました： .parent .child { // Styles for child } しかし、.childスタイルはchildコンポーネントに適用されていません。 を使用styleUrlsして、スコープの問題を解決するためparentにchildコンポーネントにスタイルシートを含めようとしました： // child.component.ts styleUrls: [ './parent.component.css', './child.component.css', ] しかし、それは助けにはなりませんでした。childスタイルシートをにフェッチすることで別の方法を試しましたが、それも助けにparentはなりませんでした。 では、親コンポーネントに含まれている子コンポーネントをどのようにスタイルするのでしょうか。

266 css  angular  angular-components 

Angular 2にはmy-compというコンポーネントがあります。 <my-comp></my-comp> Angular 2でこのコンポーネントのホスト要素をどのようにスタイルするのですか？ Polymerでは、「：host」セレクターを使用します。Angular 2で試しましたが、うまくいきません。 :host { display: block; width: 100%; height: 100%; } コンポーネントをセレクターとして使用してみました： my-comp { display: block; width: 100%; height: 100%; } どちらのアプローチも機能していないようです。 ありがとう。

188 css  angular  css-selectors  angular-components 

フォルダー名、.css、.ts、spec.ts、app.module.tsなどのすべてのコンポーネントファイルを手動で編集する以外に、Angular CLIでコンポーネントの名前を変更するショートカットはありますか？

177 angular  angular-cli  rename  angular-components 

AppModule内で作成したコンポーネントを他のモジュールで使用しようとしています。ただし、次のエラーが発生します。 「キャッチされていません（約束されています）：エラー：テンプレート解析エラー： 'contacts-box'は既知の要素ではありません： 「contacts-box」がAngularコンポーネントである場合、それがこのモジュールの一部であることを確認してください。 「contacts-box」がWebコンポーネントの場合は、このコンポーネントの「@ NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加して、このメッセージを抑制します。 私のプロジェクト構造は非常に単純です： ページをページディレクトリに保存します。各ページは異なるモジュール（customers-moduleなど）に保持され、各モジュールには複数のコンポーネント（customers-list-component、customers-add-componentなど）があります。これらのコンポーネント内で（つまり、customers-add-component内などで）ContactBoxComponentを使用したいと思います。 ご覧のとおり、widgetsディレクトリ内に連絡先ボックスコンポーネントを作成したので、基本的にはAppModule内にあります。ContactBoxComponentインポートをapp.module.tsに追加し、AppModuleの宣言リストに追加しました。それは機能しなかったので、問題をグーグルで調べて、ContactBoxComponentをエクスポートリストにも追加しました。助けにはならなかった。また、ContactBoxComponentをCustomersAddComponentに配置し、次に別のモジュール（異なるモジュールから）に配置しようとしましたが、複数の宣言があるというエラーが発生しました。 何が欠けていますか？

134 angular  typescript  angular-components  angular-module 

に依存するIonicアプリ（2.0.0-rc0）に取り組んでいますangular 2。の新しい紹介ngModulesが含まれています。app.module.ts.以下を追加します。 import { NgModule } from '@angular/core'; import { IonicApp, IonicModule } from 'ionic-angular'; import { MyApp } from './app.component'; import { Users } from '../pages/users/users'; @NgModule({ declarations: [ MyApp, Users ], imports: [ IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, Users ] }) export class AppModule {} entryComponentsここで何をしますか？Componentsはすでにで定義されていdeclarationsます。それで、それらを繰り返す必要性は何ですか？ここにコンポーネントを含めないとどうなりますか？

131 angular  angular-components  angular-module 

呼び出したいメソッドを持つ子コンポーネントを作成しました。 このメソッドを呼び出すと、console.log()行が起動されるだけで、testプロパティは設定されませんか？ 以下は、変更を加えたAngularアプリのクイックスタートです。 親 import { Component } from '@angular/core'; import { NotifyComponent } from './notify.component'; @Component({ selector: 'my-app', template: ` <button (click)="submit()">Call Child Component Method</button> ` }) export class AppComponent { private notify: NotifyComponent; constructor() { this.notify = new NotifyComponent(); } submit(): void { // execute child component method …

130 angular  typescript  angular-components 

ng-contentAngular 6で複数を使用してカスタムコンポーネントを構築しようとしていますが、これが機能せず、理由がわかりません。 これは私のコンポーネントコードです： <div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> このコンポーネントを別の場所で使用して、次のような2つの異なるHTMLコードを内部bodyとヘッダーselectにレンダリングしようとしていますng-content。 <div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng-content</div> しかし、コンポーネントは空白になっています。 私が間違っている可能性があること、または同じコンポーネントで2つの異なるセクションをレンダリングするための最良の方法を知っていますか？ ありがとう！

103 angular  angular6  angular-components  ng-content