Angular(二) - 组件Component
<ul><li>1. 组件Component示例</li>
<li>2. Component常用的几个选项</li>
<li>3. Component全部的选项
<ul>
<li>3.1继承自@Directive装饰器的选项</li>
<li>3.2@Component自己特有的选项</li>
</ul>
</li>
<li>4. 自定义component</li>
</ul>
<h2 id="1-组件component示例"><span id="head1">1. 组件Component示例</span></h2>
<p>组件是由一个装饰器<code>@Component</code>来声明的，继承自<code>@Directive</code></p>
<pre><code class="language-javascript">import {Component} from '@angular/core';
@Component({
selector: 'app-root233', // 这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化
templateUrl: './app.component.html', // 指定html模板
styleUrls: ['./app.component.css'] // 指定css
})
export class AppComponent {
title = 'angularapp-2'; // 这里定义的title和enn可以在html中{{ title }}使用
enn = true
}
</code></pre>
<p><img src="http://pic.codepie.fun/img/20200907000833.png" alt="" loading="lazy"></p>
<h2 id="2-component常用的几个选项"><span id="head2">2. Component常用的几个选项</span></h2>
<p><code>@Component</code>最常用的几个选项是:</p>
<ul>
<li><strong>selector</strong>：这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化。</li>
<li><strong>template</strong>：组件的内联模板，为组件展示的内容，一般内容比较少时使用。如果提供了它，就不要再用 templateUrl 提供模板了</li>
<li><strong>templateUrl</strong>：组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。</li>
<li><strong>providers</strong> ：使用一个 令牌 配置该指令或组件的 注入器，该令牌会映射到一个依赖项的提供商</li>
<li><strong>exportAs</strong> ：一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们</li>
</ul>
<h2 id="3-component全部的选项"><span id="head3">3. Component全部的选项</span></h2>
<h3 id="31--继承自directive装饰器的选项"><span id="head4">3.1继承自@Directive装饰器的选项</span></h3>
<table>
<thead>
<tr>
<th>选项</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>selector</td>
<td>string</td>
<td>css选择器名，用于在模板中标记出该指令（组件），并触发其实例化</td>
</tr>
<tr>
<td>inputs</td>
<td>string[]</td>
<td>Angular 会在变更检测期间自动更新输入属性。 inputs 属性定义了一组从 directiveProperty 指向 bindingProperty 的配置项： <strong>·</strong> directiveProperty 用于指定要写入值的指令内属性。 <strong>·</strong> bindingProperty 用于指定要从中读取值的 DOM 属性。 当没有提供 bindingProperty 时，就假设它和 directiveProperty 一样。 例如： <img src="https://img-blog.csdn.net/20181021125137591?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FubzEwMTA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" alt="在这里插入图片描述" loading="lazy"></td>
</tr>
<tr>
<td>outputs</td>
<td>string[]</td>
<td>一组可供事件绑定的输出属性。当输出属性发出事件时，就会调用模板中一个附加到该事件的处理器。 每个输出属性都会把 directiveProperty 映射到 bindingProperty： <strong>·</strong> directiveProperty 指定要发出事件的组件属性。 <strong>·</strong> bindingProperty 指定要附加事件处理器的 HTML 属性。</td>
</tr>
<tr>
<td>provides</td>
<td>Provider[]</td>
<td>服务提供商的集合</td>
</tr>
<tr>
<td>exportAs</td>
<td>string</td>
<td>一个或多个名字，可以用来在模板中把该指令赋值给一个变量。当有多个名字时，请使用逗号分隔它们。</td>
</tr>
<tr>
<td>queries</td>
<td>[{key:string]:any}</td>
<td>配置将要注入到该指令中的一些查询。 内容查询会在调用 ngAfterContentInit 回调之前设置好。 试图查询会在调用 ngAfterViewInit 回调之前设置好。</td>
</tr>
<tr>
<td>jit</td>
<td>true</td>
<td>如果为 true，则该指令/组件将会被 AOT 编译器忽略，因此永远只会被 JIT 编译。 这个选项是为了支持未来的 Ivy 编译器，目前还没有效果。</td>
</tr>
<tr>
<td>host</td>
<td>[{key:string]:string}</td>
<td>使用一组键-值对，把类的属性映射到宿主元素的绑定（Property、Attribute 和事件）。 Angular 在变更检测期间会自动检查宿主 Property 绑定。 如果绑定的值发生了变化，Angular 就会更新该指令的宿主元素。 当 key 是宿主元素的 Property 时，这个 Property 值就会传播到指定的 DOM 属性。 当 key 是 DOM 中的静态 Attribute 时，这个 Attribute 值就会传播到宿主元素上指定的 Property 去。 对于事件处理： <strong>·</strong> 它的 key 就是该指令想要监听的 DOM 事件。 要想监听全局事件，请把要监听的目标添加到事件名的前面。 这个目标可以是 window、document 或 body。 <strong>·</strong> 它的 value 就是当该事件发生时要执行的语句。如果该语句返回 false，那么就会调用这个 DOM 事件的 preventDefault 函数。 这个语句中可以引用局部变量 $event 来获取事件数据。</td>
</tr>
</tbody>
</table>
<h3 id="32--component自己特有的选项"><span id="head5">3.2@Component自己特有的选项</span></h3>
<table>
<thead>
<tr>
<th>选项</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>changeDetection</td>
<td>ChangeDetectionStrategy</td>
<td>当组件实例化之后，Angular 就会创建一个变更检测器，它负责传播组件各个绑定值的变化。 该策略是下列值之一： <strong>·</strong> ChangeDetectionStrategy#OnPush(0) 把策略设置为 CheckOnce（按需）。 <strong>·</strong> ChangeDetectionStrategy#Default(1) 把策略设置为 CheckAlways。</td>
</tr>
<tr>
<td>viewProviders</td>
<td>Provider[]</td>
<td>定义一组可注入对象，它们在视图的各个子节点中可用</td>
</tr>
<tr>
<td>moduleId</td>
<td>string</td>
<td>包含该组件的那个模块的 ID。该组件必须能解析模板和样式表中使用的相对 URL。 SystemJS 在每个模块中都导出了 __moduleName 变量。在 CommonJS 中，它可以设置为module.id。</td>
</tr>
<tr>
<td>templateUrl</td>
<td>string</td>
<td>组件模板文件的 URL。如果提供了它，就不要再用 template 来提供内联模板了。</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td>组件的内联模板。如果提供了它，就不要再用 templateUrl 提供模板了。</td>
</tr>
<tr>
<td>styleUrls</td>
<td>string[]</td>
<td>一个或多个 URL，指向包含本组件 CSS 样式表的文件。</td>
</tr>
<tr>
<td>styles</td>
<td>string[]</td>
<td>本组件用到的一个或多个内联 CSS 样式。</td>
</tr>
<tr>
<td>animations</td>
<td>any[]</td>
<td>一个或多个动画 trigger() 调用，包含一些 state() 和 transition() 定义。</td>
</tr>
<tr>
<td>encapsulation</td>
<td><strong>ViewEncapsulation</strong></td>
<td>供模板和 CSS 样式使用的样式封装策略。取值为： <strong>·</strong> ViewEncapsulation.Native：使用 Shadow DOM。它只在原生支持 Shadow DOM 的平台上才能工作。 <strong>·</strong> ViewEncapsulation.Emulated：使用垫片（shimmed) CSS 来模拟原生行为。 <strong>·</strong> ViewEncapsulation.None：使用全局 CSS，不做任何封装。 如果没有提供，该值就会从 CompilerOptions 中获取它。默认的编译器选项是 ViewEncapsulation.Emulated。 如果该策略设置为 ViewEncapsulation.Emulated，并且该组件没有指定 styles 或 styleUrls，就会自动切换到 ViewEncapsulation.None。</td>
</tr>
<tr>
<td>interpolation</td>
<td></td>
<td>改写默认的插值表达式起止分界符（{{ 和 }}）</td>
</tr>
<tr>
<td>entryComponents</td>
<td>Array</td>
<td>一个组件的集合，它应该和当前组件一起编译。对于这里列出的每个组件，Angular 都会创建一个 ComponentFactory 并保存进 ComponentFactoryResolver 中。</td>
</tr>
<tr>
<td>preserveWhitespaces</td>
<td>boolean</td>
<td>为 true 则保留，为 false 则从编译后的模板中移除可能多余的空白字符。 空白字符就是指那些能在 JavaScript 正则表达式中匹配 \s 的字符。默认为 false，除非通过编译器选项改写了它。</td>
</tr>
</tbody>
</table>
<h2 id="4-自定义component"><span id="head6">4. 自定义component</span></h2>
<p>angular提供了命令行可以生成组件，不用手动创建，下面是一个例子</p>
<pre><code class="language-shell"># 在app/component文件夹下生成一个叫custom的组件
ng g component component/custom
</code></pre>
<p>生成出来的结果</p>
<p><img src="http://pic.codepie.fun/img/20200907000512.png" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/baoshu/p/13624476.html
頁:
[1]