##Options | Type | 説明 |
changeDetection | ChangeDetectionStrategy | コンポーネントがインスタンス化されると、Angular は変更検出器を作成します。コンポーネントの各バインディング値の変更を伝播します。戦略は次のいずれかの値です。 · ChangeDetectionStrategy#OnPush(0) 戦略を CheckOnce (オンデマンド) に設定します。
·ChangeDetectionStrategy#Default(1) 戦略を CheckAlways に設定します。
|
viewProviders | Provider[] | ビューのさまざまな子ノードで使用できる注入可能なオブジェクトのセットを定義します |
moduleId | string | このコンポーネントを含むモジュールの ID。コンポーネントは、テンプレートとスタイルシートで使用される相対 URL を解決できなければなりません。 SystemJS は、すべてのモジュールの __moduleName 変数をエクスポートします。 CommonJS では、これを module.id に設定できます。 |
templateUrl | string | コンポーネント テンプレート ファイルの URL。提供されている場合は、インライン テンプレートを提供するためにテンプレートを使用しないでください。 |
template | string | コンポーネントのインライン テンプレート。指定されている場合は、templateUrl を使用してテンプレートを指定しないでください。 |
styleUrls | string[] | このコンポーネントの CSS スタイル シートを含むファイルを指す 1 つ以上の URL。 |
styles | string[] | このコンポーネントで使用される 1 つ以上のインライン CSS スタイル。 |
animations | any[] | いくつかの state() およびtransition() 定義を含む、1 つ以上のアニメーション Trigger() 呼び出し。 |
encapsulation | ViewEncapsulation | テンプレートと CSS スタイルで使用されるスタイルのカプセル化戦略。値は次のとおりです: ・ViewEncapsulation.ShadowDom: Shadow DOM を使用します。 Shadow DOM をネイティブにサポートするプラットフォームでのみ動作します。
· ViewEncapsulation.Emulated: シムされた CSS を使用してネイティブの動作をエミュレートします。
· ViewEncapsulation.None: カプセル化せずにグローバル CSS を使用します。
指定しない場合、値は CompilerOptions から取得されます。デフォルトのコンパイラ オプションは ViewEncapsulation.Emulated です。ポリシーが ViewEncapsulation.Emulated に設定されており、コンポーネントでスタイルまたは styleUrls が指定されていない場合、自動的に ViewEncapsulation.None に切り替わります。
|
interpolation | [string, string] | 補間式のデフォルトの開始区切り文字と終了区切り文字 ({{ および }}) をオーバーライドします。 |
entryComponents | Arrayany[]> |
preserveWhitespaces | boolean | が true の場合は保持され、false の場合は、コンパイルされたテンプレートから余分な空白文字が削除される可能性があります。空白文字は、JavaScript 正規表現の \s に一致する文字です。コンパイラ オプションでオーバーライドしない限り、デフォルトは false です。 |
二、 selector 选择器
可使用下列形式之一：
element-name： 根据元素名选取[attribute]： 根据属性名选取.class： 根据类名选取[attribute=value]： 根据属性名和属性值选取not(sub_selector)： 只有当元素不匹配子选择器 sub_selector 的时候才选取selector1, selector2： 无论 selector1 还是 selector2 匹配时都选取
2.1 <span style="font-size: 18px;">element-name</span>： 根据元素名选取
@Component({
selector: 'app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})ログイン後にコピー
<app-element></app-element>
ログイン後にコピー
2.2 <span style="font-size: 18px;">[attribute]</span>： 根据属性名选取
@Component({
selector: '[app-element]',
template: './element.component.html',
styleUrls: ['./element.component.css']
})ログイン後にコピー
<div app-element></div>
ログイン後にコピー
2.3 <span style="font-size: 18px;">.class</span>： 根据类名选取
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css']
})ログイン後にコピー
<div class="app-element"></div>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
三、 host: {[key:string]:string}
使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。
Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。
- 当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。
- 当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。
- 注意属性的值默认为变量，如果直接使用属性值，需要加字符串单引号或者双引号，变量直接在组件里定义即可
对于事件处理：
- 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。
- 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。
3.1 <span style="font-size: 18px;">attribute</span> 和 <span style="font-size: 18px;">property</span>
- property：dom元素作为对象附加的内容，例如childNodes、firstChild等
- attribute：HTML标签特性是dom节点自带的属性
异同：
- 部分属性既属于 property ，又属于 attribute ，比如 id
- attribute 初始化后不会再改变； property 默认值为初始值，会随着 dom 更新
所以在 angular2 中双向绑定实现是由 dom 的 property 实现的，所以指令绑定的是 property ，但是在某些情况下 dom 不存在某个 property 比如 colspan，rowspan 等，这时想要绑定 html 标签特性需要用到 attr:
<table width="100%" border="10px solid">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td [attr.colspan]=colnum>January</td>
</tr>
<tr>
<td [attr.colspan]=colnum>February</td>
</tr>
</table>
let colnum:number = 2;ログイン後にコピー
3.2 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">class</span>
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css'],
host: {
'[class.default-class]': 'useDefault'
},
encapsulation: ViewEncapsulation.None // 让宿主元素也用上 element.component.css 样式。否则，默认胶囊封装避免CSS污染。
})
export class AppElementComponent {
@Input() useDefault = true;
}ログイン後にコピー
<div class="app-element"></div>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
3.3 使用 <span style="font-size: 18px;">host</span> 绑定 <span style="font-size: 18px;">style</span>
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css'],
host: {
'[style.background]': 'inputBackground'
}
})
export class AppElementComponent {
@Input() inputBackground = 'red';
}ログイン後にコピー
<div class="app-element"></div>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
3.4 使用 <span style="font-size: 18px;">host</span> 绑定事件
@Component({
selector: '.app-element',
template: './element.component.html',
styleUrls: ['./element.component.css'],
host: {
'(click)': 'onClick($event)'
}
})
export class AppElementComponent {
public onClick($event) {
console.log($event);
}
}ログイン後にコピー
<div class="app-element"></div>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
四、 encapsulation（封装）
供模板和 CSS 样式使用的样式封装策略。
4.1 Web Components
通过一种标准化的非侵入的方式封装一个组件，每个组件能组织好它自身的 HTML 结构、CSS 样式、JavaScript 代码，并且不会干扰页面上的其他元素。
Web Components 由以下四种技术组成：
- Custom Elements: 自定义元素HTML
- Templates: HTML模板
- Shadow DOM: 影子DOMHTML
- Imports: HTML导入
4.2 Shadow DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shadow DOM</title>
<style type="text/css">
.shadowroot_son {
color: #f00;
}
</style>
</head>
<body>
<p>我不在 Shadow Host内</p>
<div>Hello, world!</div>
<script>
// 影子宿主（shadow host）
var shadowHost = document.querySelector('.shadowhost');
// 创建影子根（shadow root）
var shadowRoot = shadowHost.createShadowRoot();
// 影子根作为影子树的第一个节点，其他的节点比如p节点都是它的子节点。
shadowRoot.innerHTML = '<p>我在 Shadow Host内</p>';
</script>
</body>
<html>ログイン後にコピー
4.3 <span style="font-size: 18px;">ViewEncapsulation</span>
ViewEncapsulation 允许设置三个可选的值：
- ViewEncapsulation.Emulated: 无 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。这是 Angular 的默认设置。
- ViewEncapsulation.ShadowDom: 使用原生的 Shadow DOM 特性
- ViewEncapsulation.None: 无 Shadow DOM，并且也无样式包装
4.3.1 ViewEncapsulation.None
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h4>Welcome to Angular World</h4>
<p class="greet">Hello {{name}}</p>
`,
styles: [`
.greet {
background: #369;
color: white;
}
`],
encapsulation: ViewEncapsulation.None // None | Emulated | ShadowDom
})
export class AppComponent {
name: string = 'Semlinker';
}ログイン後にコピー
ViewEncapsulation.None 设置的结果是没有 Shadow DOM，并且所有的样式都应用到整个 document，换句话说，组件的样式会受外界影响，可能被覆盖掉。
4.3.2 ViewEncapsulation.Emulated
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
...,
encapsulation: ViewEncapsulation.Emulated // None | Emulated | ShadowDom
})
export class AppComponent {
name: string = 'Semlinker';
}ログイン後にコピー
ViewEncapsulation.Emulated 设置的结果是没有 Shadow DOM，但是通过 Angular 提供的样式包装机制来封装组件，使得组件的样式不受外部影响。虽然样式仍然是应用到整个 document，但 Angular 为 .greet 类创建了一个 [_ngcontent-cmy-0] 选择器。可以看出，我们为组件定义的样式，被 Angular 修改了。其中的 _nghost-cmy- 和 _ngcontent-cmy- 用来实现局部的样式。
4.3.3 ViewEncapsulation.ShadowDom
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'my-app',
...,
encapsulation: ViewEncapsulation.ShadowDom // None | Emulated | ShadowDom
})
export class AppComponent {
name: string = 'Semlinker';
}ログイン後にコピー
ViewEncapsulation.ShadowDom 设置的结果是使用原生的 Shadow DOM 特性。Angular 会把组件按照浏览器支持的 Shadow DOM 形式渲染。
更多编程相关知识，请访问：编程视频！！
以上がAngular の @Component デコレータについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Ubuntu 24.04 に Angular をインストールする方法
Mar 23, 2024 pm 12:20 PM
Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために
フロントエンド開発に PHP と Angular を使用する方法
May 11, 2023 pm 04:04 PM
インターネットの急速な発展に伴い、フロントエンド開発テクノロジーも常に改善され、反復されています。 PHP と Angular は、フロントエンド開発で広く使用されている 2 つのテクノロジーです。 PHP は、フォームの処理、動的ページの生成、アクセス許可の管理などのタスクを処理できるサーバー側スクリプト言語です。 Angular は、単一ページ アプリケーションの開発やコンポーネント化された Web アプリケーションの構築に使用できる JavaScript フレームワークです。この記事では、PHPとAngularをフロントエンド開発に使用する方法と、それらを組み合わせる方法を紹介します。
See all articles
