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


11
コンポーネントテンプレートの要素を選択するにはどうすればよいですか?
コンポーネントテンプレートで定義された要素を取得する方法を知っている人はいますか?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要素の参照をキャッチまたは取得するにはどうすればよいですか?

16
親コンポーネントのCSSファイルから子コンポーネントをスタイルする方法
親コンポーネントがあります: <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はなりませんでした。 では、親コンポーネントに含まれている子コンポーネントをどのようにスタイルするのでしょうか。

6
Angular 2:コンポーネントのホスト要素をスタイルする方法は?
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%; } どちらのアプローチも機能していないようです。 ありがとう。


13
Angular 2「コンポーネント」は既知の要素ではありません
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に配置し、次に別のモジュール(異なるモジュールから)に配置しようとしましたが、複数の宣言があるというエラーが発生しました。 何が欠けていますか?

6
角度ngModuleのentryComponentsとは何ですか?
に依存する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ます。それで、それらを繰り返す必要性は何ですか?ここにコンポーネントを含めないとどうなりますか?

7
親クラスから子コンポーネントメソッドを呼び出す-Angular
呼び出したいメソッドを持つ子コンポーネントを作成しました。 このメソッドを呼び出すと、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 …

4
複数のngコンテンツ
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つの異なるセクションをレンダリングするための最良の方法を知っていますか? ありがとう!
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.