12,673
回編集
差分
ナビゲーションに移動
検索に移動
→機能
===ライフサイクル===
-----
*ライフサイクルメソッドを利用する際は対応するインターフェースを実装する
*インターフェース名は、以下の一覧から ngを除いたもの
{|class="wikitable"
!ライフサイクル
|-
|ngOnInit
|入力値ngOnChangesで入力値(@Inputp)が処理された後、コンポーネントの初期化時(最初のngOnChangesメソッドの後で一度だけ)入力プロパティに基づく処理は、コンストラクタでなく、ここで行う必要がある一般的にコンポーネントの初期化処理はOnInitに集約する
|-
|ngDoCheck
|ngOnDestroyed
|コンポーネントが破棄される時
タイマーのクリア、Observableの購読解除など
|-
|コンポーネント破棄
*https://stackoverflow.com/questions/32693061/how-can-i-select-an-element-in-a-component-template
*現在のビューに配置された子コンポーネントを取得する
*childViewChildrenデコレーターを適用したプロパティにはQueryListがセットされます。QueryListはいわゆるコレクションクラスとなっており、検出された複数の要素をより効率的に参照できるようなAPIを提供しています*[https: 取得する子コンポーネント、prop:プロパティ名//angular.io/api/core/QueryList QueryListが提供するAPI]
<pre>
@ViewChildren(child) prop
</pre>
*child: 取得する子コンポーネント、prop:プロパティ名
====@ViewChildデコレーター ： 単一の子コンポーネントを取得====
<element (changed)="onEdited($event)"> ... </element>
</pre>
===コンポーネント配下のコンテンツをテンプレートに反映させる ng-content===
----
* <ng-content> を使用することで呼び出し元で指定したコンテンツをテンプレートに埋め込むことが可能になる
===コンポーネントのスタイル定義===
----
*@Componentデコレーターの属性に指定する
** styles : スタイルシートの文字列
** styleUrls : cssファイルのパス
*コンポーネントで指定されたコンポーネントスタイルは原則としてコンポーネントの中だけで有効
*コンポーネントスタイルで使用されているセレクター式はコンポーネントローカル
*styles
<pre>
@Component({
selector: 'app-nav-menu',
templateUrl: './nav-menu.component.html',
styles: [`
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
`,`
html {
font-size: 14px;
}
`,`
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
`,`
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
`]
})
export class NavMenuComponent {
</pre>
*styleUrls
<pre>
@Component({
selector: 'app-nav-menu',
templateUrl: './nav-menu.component.html',
styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
</pre>
*その他の定義方法
**テンプレートに style タグを埋め込む
**テンプレートに link タグを埋め込みｃｓｓファイルを指定
**スタイルシートから＠Importディレクティブによるインポート
====コンポーネントスタイルで利用できる特殊セレクター====
=====コンポーネント本体にスタイルを適用するhost擬似セレクター=====
----
*host擬似セレクターはコンポーネント自体を表す
*テンプレートはコンポーネント配下に展開され、コンポーネントそのものはテンプレートの一部ではない
*コンポーネント要素へはhostセレクター以外ではアクセスできない
<pre>
@Component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
styles: [
`:host {
display: block;
border: 3px solid red;
background-color: Blue;
}`
]
})
export class FetchDataComponent {
:
</pre>
[[File:angular_host_selector.png | 400px]]
*:host(スタイルクラス名): { ... } : 特定のスタイルクラス名を持つ場合だけ有効
=====コンポーネントの内部状態に応じてにスタイルを適用するhost-context擬似セレクター=====
----
==サービス==
==[[Tips]]==
===機能===
====router-outlet で @Outputしたい=====
@Outputはできないが、onActivateでコンポーネント参照が取得できる
<pre>
<router-outlet (activate)="onActivate($event)"></router-outlet>
</pre>
*コンポーネント参照のメソッドを呼ぶなりする
<pre>
onActivate(component: any /*Component*/) {
}
</pre>
====Chrome拡張機能====
augury
====Hello.js 認証をまとめる[[JavaScript]]ライブラリ====
*http://adodson.com/hello.js/#scope
===文法===
====[[Java]]scriptのグローバルオブジェクトを利用====
© 2006 矢木浩人
