Angular 20+ 高阶教程 – Component 组件の Angular Components vs Custom Elements

独自行走的犀牛 發表於 2023-4-6 21:20:00

Angular 20+ 高阶教程 – Component 组件の Angular Components vs Custom Elements

<h2>前言</h2>
在上一篇 Angular Components vs Web Components 中，我们整体对比了 Angular Components 和 Web Components 的区别。
这一篇我们将针对 Custom Elements 的部分继续对比学习。
同样地，请先看我以前写的 DOM – Web Components の Custom Elements。
 
<h2>Attribute、Property、Custom Event</h2>
对于一个封装好的 Custom Element，若外部想与其交互，有两种方式：
<ol>
<li>
修改 property 或 attribute (外面影响里面 -- in)
</li>
<li>
监听 custom event (里面影响外面 -- out)
</li>
</ol>
Angular Components 也是如此，只是在 Component 内部，Angular 替我们封装了许多繁琐的实现代码。
 
<h2>Cookie Acknowledge Component Step by Step</h2>
我们来做一个 cookie acknowledge 组件。
最终长这样：
<img src="https://img2023.cnblogs.com/blog/641294/202304/641294-20230406223053922-2126814529.gif">
<h3>使用 Cookie Acknowledge Component</h3>
<div class="cnblogs_code">
<pre><app-cookie-acknowledge websiteName="兴杰 Blog" (acknowledge)="alert($event)" /></pre>
</div>
"websiteName" 是组件的 attribute / property。它是组件中 <code></code> Welcome to "兴杰 Blog" 的一部分。
下面这句是 Angular 的 binding syntax
<div class="cnblogs_code">
<pre>(acknowledge)="alert($event)"</pre>
</div>
后面的章节会详细介绍，这里只需要知道它相等于 addEventListener 就可以了，类似于：
<pre class="language-javascript highlighter-hljs"><code>document.querySelector('app-cookie-acknowledge')!.addEventListener('acknowledge', (event: string) => alert(event))</code></pre>
注：Angular 没有强制使用 CustomEvent 作为 event，dispatch 的 event 可以是任何类型，比如一个 string 也可以。
<h3>Create Cookie Acknowledge Component</h3>
<div class="cnblogs_code">
<pre>ng g c cookie-acknowledge</pre>
</div>
<h4>input and output</h4>
cookie-acknowledge.ts
<pre class="language-javascript highlighter-hljs"><code>import { Component, input, output } from '@angular/core';

export class CookieAcknowledge {
readonly websiteName = input.required<string>();
readonly acknowledgeEmitter = output<string>({ alias: 'acknowledge' });
}</code></pre>
<code>input</code> 和 <code>output</code> 是 Angular built-in 的特殊函数。
为什么说它们特殊？
因为它们不仅仅用于 runtime。
在 compile 阶段，Angular compiler 会识别出它们并进行特殊编译。
具体怎样编译，我以后有机会再讲解，这里我们只需要知道 <code>input</code> 和 <code>output</code> 的含义就可以了。
<h4>input</h4>
input 代表说，这个属性 "websiteName" 会被用作 element 的 attribute / property。
<img src="https://img2024.cnblogs.com/blog/641294/202506/641294-20250629181346252-197412043.png">
<img src="https://img2024.cnblogs.com/blog/641294/202506/641294-20250629181348850-2065253087.png">
websiteName 属性值是透过 html element attribute 传进来的。
input.required 则表示 element 一定要附上这个 attribute，不然 IDE 会直接报错。
<img src="https://img2024.cnblogs.com/blog/641294/202506/641294-20250629182211624-1710890515.png">
<h4>output</h4>
有 input 自然就有 output。
input 用于 attribute，output 则用来表示 dispatch event。
<img src="https://img2024.cnblogs.com/blog/641294/202506/641294-20250629181749936-1811392115.png">
alias 是配置别名，如果没有配置的话，属性名 "acknowledgeEmitter" 会被用作 event name。
<img src="https://img2024.cnblogs.com/blog/641294/202507/641294-20250708185548484-784714449.png">
cookie-acknowledge.html
<div class="cnblogs_code">
<pre><h1>Cookie Acknowledge</h1>
<p>Welcome to {{ websiteName() }}, to allow we track you, please press acknowledge button.</p>
<button (click)="acknowledgeEmitter.emit('Yes, track me!')">Acknowledge</button></pre>
</div>
<code>{{ websiteName() }}</code> 是 binding syntax -- 意思是把 websiteName 属性值写入 <code></code> 中。(另外提一点： input 函数返回的是 InputSignal (Signal 的一种)，因此它是 getter 函数，取值需要以调用的方式)
<code>(click)</code> 也是 binding syntax -- 意思是 <code>addEventListener('click')</code>。
<code>acknowledgeEmitter.emit('Yes, track me!')</code> 是 click event 的 callback，其行为是 dispatch custom event "acknowledge"。
Custom event 通常是 dispatch CustomEvent 对象，传值是透过 <code>event.detail</code> 属性；但 Angular 没有这个限制，我们可以 dispatch 任何类型。
当然，如果我们想 follow custom event 的规范，dispatch CustomEvent 对象也是可以。
<h3>小结</h3>
Angular Components 和 Custom Elements 一样，都是透过 component attribute / property 和 listen event dispatch 来与组件交互。
Angular 用 <code>input</code> 和 <code>output</code> 函数声明对外 (HTML) 开放的属性和可监听的事件，并透过 OutputEmitterRef 对象 dispatch event。
Angular dispatch event 没有强制要求使用 CustomEvent 对象，我们可以 dispatch 任何类型作为 event。
 
<h2>input 函数</h2>
element attribute 和 element property 是两个不同的东西。
<h3>attribute & property</h3>
<div class="cnblogs_code">
<pre><input readonly></pre>
</div>
上面这个是 attribute
<ol>
<li>
它可以有，也可以没有 (没有就是这样 <code><input></code>)。
</li>
<li>
它的 value 类型一定是 string。(<code><input readonly="false"></code>，value 是 string "false")
</li>
<li>如果只有 attribute key，没有 attribute value (<code><input readonly></code>)，那它的 value 是 empty string。</li>
</ol>
<pre class="language-javascript highlighter-hljs"><code>const input = document.createElement('input');
console.log(input.readOnly); // false</code></pre>
上面这个是 property
<ol>
<li>
它一定有
</li>
<li>
它的 value 类型是 boolean
</li>
<li>当有 attribute 时 (不管 value 是什么)，readOnly 就是 true；反之 readOnly 就是 false。</li>
</ol>
attribute 和 property 是相互关联的：
<ol>
<li>
当有 "readonly" attribute 时，"readOnly" property 就是 true；反之就是 false。
</li>
<li>
当你改变其中一个，另一个也要自动改变
<pre class="language-javascript highlighter-hljs"><code>const input = document.createElement('input');
console.log(input.readOnly); // by default property 是 false
input.setAttribute('readonly', ''); // set attribute
console.log(input.readOnly); // property 变成了 true
input.readOnly = false; // set property
console.log(input.hasAttribute('readonly')); // attribute 变没了</code></pre>
</li>
</ol>
<h3>input の required</h3>
Angular <code>input</code> 函数的主要职责就是替我们维护组件 attribute 和 property 的映射关系。
上面我们已经看了一个例子
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName = input.required<string>();
}</code></pre>
这表示 CookieAcknowledge 组件有一个 property "websiteName"，相应地，它也会有一个 "websiteName" attribute。
<div class="cnblogs_code">
<pre><app-cookie-acknowledge websiteName="兴杰 Blog" /></pre>
</div>
<code>input.required</code> 的 required 则表示这个 attribute 是必填的。
如果我们忘记填，IDE 会直接报错。
<img src="https://img2024.cnblogs.com/blog/641294/202507/641294-20250708212618313-1305238956.png">
如果没有 required 则是这样
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName: InputSignal<string | undefined> = input<string>();
}</code></pre>
attribute 可以不需要填，当没有 attribute 时，"websiteName" property getter value 会是 undefined。
注：<code>input</code> 返回的是 InputSignal，它继承自 readonly Signal，因此是一个 getter 函数。
如果我们不希望它是 undefined，可以提供一个 default value；当没有 attribute 时，"websiteName" property getter value 就会是 default value。
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName: InputSignal<string> = input<string>('default value'); // 这样就不会 undefined 了
}</code></pre>
<h3>input の alias</h3>
alias 是一个 <code>input</code> options，它可以让 attribute name 和 property name 不相同，但却可以正确映射。
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName = input.required<string>({ alias: 'name' });
}</code></pre>
property name 是 "websiteName"，但配置了 alias "name"，因此 attribute name 是 "name" 而不是 "websiteName"。
<div class="cnblogs_code">
<pre><app-cookie-acknowledge name="兴杰 Blog" /></pre>
</div>
<h3>input の transform</h3>
transform 也是一个 <code>input</code> options，它的作用是在 set property value 时拦截，并对 value 进行转换 (transform)，常用于类型转换。
上面我们说了，attribute value 的类型一定是 string，而 property value 的类型则可以是任何类型，比如说 boolean。
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly required = input.required<boolean>();
}</code></pre>
有一个 "required" property，类型是 boolean。
<div class="cnblogs_code">
<pre><app-cookie-acknowledge required /> 

<app-cookie-acknowledge required="true" />

<app-cookie-acknowledge required="false" /> 

<app-cookie-acknowledge required="" /> </pre>
</div>
无论我们怎样设置 "required" attribute 它都会报错，因为 attribute 是 string，但 property 却是 boolean。
有两种方法可以解决：
<ol>
<li>
binding syntax (模板语法)
<div class="cnblogs_code">
<pre><app-cookie-acknowledge ="true" />
<app-cookie-acknowledge ="false" /></pre>
</div>
<code></code> 是 binding syntax，它的作用是 set value to property。
注意：不是 set value to attribute 哦，是 set value to property。
另外，它的 value 是 JavaScript 表达式 (Angular 限缩版的)，而不是普通的 string。
<div class="cnblogs_code">
<pre><app-cookie-acknowledge ="'兴杰 Blog'" ="true" /> </pre>
</div>
注意看，<code></code>的 value "'兴杰 Blog'" 有多一层 single quote，因为它是 JavaScript 表达式。
binding syntax 博大精深，以后会单独写一篇来教，这里点到为止。
</li>
<li>
transform
<pre class="language-javascript highlighter-hljs"><code>import { booleanAttribute, Component, input } from '@angular/core';

export class CookieAcknowledge {
readonly required = input.required({ transform: booleanAttribute });
}</code></pre>
<code>booleanAttribute</code> 是一个把 value 转换成 boolean 的函数，它是 Angular built-in 的，源码在 coercion.ts
<img src="https://img2024.cnblogs.com/blog/641294/202507/641294-20250708234107742-956285653.png">
如果 value 是 boolean 那直接返回。
如果 value 是 null or undefined or 'false' 就返回 false 
其它情况则返回 true
<div class="cnblogs_code">
<pre><app-cookie-acknowledge required /> 
<app-cookie-acknowledge required="" /> 
<app-cookie-acknowledge required="true" />
<app-cookie-acknowledge required="false" /> </pre>
</div>
string value 除了 'false' 以外，其它的都会 transform 成 true。
搭配 binding syntax，它会是这样
<div class="cnblogs_code">
<pre><app-cookie-acknowledge ="null" /> 
<app-cookie-acknowledge ="undefined" /> 
<app-cookie-acknowledge ="false" /> 
<app-cookie-acknowledge ="'false'" /> 

<app-cookie-acknowledge ="0" />
<app-cookie-acknowledge ="1" />
<app-cookie-acknowledge ="[]" /> 
<app-cookie-acknowledge ="{}" /> </pre>
</div>
首先，transform 是 for property value 而不是 attribute value，所以采用 binding syntax direct set value to property 也依然会 transform。
除了头 4 个 null, undefined, false, 'false' 会 transform 成 false 以外，其它的 value 一律都 transform 成 true。
</li>
</ol>
除了 <code>booleanAttribute</code>，Angular 还有一个 built-in 的 transform 函数 -- <code>numberAttribute</code>。
顾名思义，它是用来 transform to number 的，源码在 coercion.ts
<img src="https://img2024.cnblogs.com/blog/641294/202507/641294-20250709004639100-491182371.png">
主要是透过 <code>parseFloat</code> 和 <code>Number</code> 做转化，转换失败会 fallback to <code>NaN</code>。
<h3>undefined as no set attribute</h3>
<pre class="language-javascript highlighter-hljs"><code>function createComponent(websiteName = 'default value') {}</code></pre>
这是一个函数，它有一个 optional parameter with default value。
<pre class="language-javascript highlighter-hljs"><code>createComponent();
createComponent(undefined);</code></pre>
调用函数时，可以不传参数，也可以传 undefined，这两个方式是等价的，websiteName 最终都是 'default value'。
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName = input('default value');
}</code></pre>
"websiteName" property 是 optional with default value。
我们可以不设置 "websiteName" attribute，像这样
<div class="cnblogs_code">
<pre><app-cookie-acknowledge /> </pre>
</div>
但却不能透过 binding syntax 直接设置 property value to undefined
<img src="https://img2024.cnblogs.com/blog/641294/202507/641294-20250709013145802-1479516188.png">
这意味着，我们无法 "动态" 的决定是否要设置 attribute 给它。
解决方案是配置 transform
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName = input('default value', {
transform: (value : string | undefined | null) => value == null ? 'default value' : value
});
}</code></pre>
如果传入的是 null or undefined 就 transform to 'default value'。
虽然代码有点繁琐，不优雅，但勉强能用。
<h3>input の compilation</h3>
<code>input</code>除了是一个函数，它在 compile 阶段还是一个识别符。
因此，下面这个写法会报错
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName: InputSignal<string>;

constructor() {
// Error : Unsupported call to the input.required function. This function can only be called in the initializer of a class member.
this.websiteName = input.required<string>();
}
}</code></pre>
从 JavaScript 的角度看，这个写法完全没有问题。
但 IDE 却报错了，因为 Angular compiler 无法解析这么复杂的写法。
所以，我们只能这样定义 input
<pre class="language-javascript highlighter-hljs"><code>export class CookieAcknowledge {
readonly websiteName = input.required<string>();
}</code></pre>
 
<h2>output 函数</h2>
todo 写 custom element + custom event 例子 (用上面例子，但不需要写完整)
然后用 output 实现
 
接下来写 lifecycle custom element vs angular 的，可以尝试引入 @Attribute 那个 inject(token)
 
 
 
<h2>@Attribute</h2>
@Input 是用来拿 property 的，@Attribute 是用来拿 attribute 的。
看例子：
<div class="cnblogs_code">
<pre><app-item name="iPhone 14" /></pre>
</div>
有一个 Item 组件，它有一个 attrbute name，value 是 'iPhone 14'。
在 AppItem 组件 constructor 参数使用 @Attribute decorator
<div class="cnblogs_code">
<pre>export class ItemComponent {
constructor(
// 1. 在 constructor 使用 @Attribute decorator 获取 name attribute
@Attribute('name') name: string,
) {
console.log(name); // 'iPhone 14'
}
}</pre>
</div>
这样就可以拿到 attribute value 了。
这里有 2 个点要注意：
<ol>
<li>
@Attribute 是 apply 在 constructor 参数，而不是像 @Input 那样 appy 在 property。
</li>
<li>
@Attribute 不可以和 @Input 撞，两者只能有一个存在。
</li>
<li>
@Attribute 没有 binding 概念，它一定是 static string value。
</li>
</ol>
@Attribute 相对 @Input 来说是非常冷门的，组件一般上很少会用 @Attribute，指令 + 原生 DOM 才可能会用到 @Attribute。(指令后面章节才会教)
 
<h2>@Input 和 @Output Decorator 正在被放弃</h2>
Decorator 目前普遍不受待见，两大原因。 
1. ECMA 把 Decorator 拆成了两个版本，而且第二个还没有定稿。
2. 函数式的天下，Decorator 自然也变成小众了。
所以，Angular 从 v14 开始就有了弃暗投明的想法。一步一步靠拢 react、vue、solid、svelte 等等前端技术。
当然所谓的靠拢只是在开发体验上，写法上不同而已，概念是靠拢不了的。
<h3>metadata 写法</h3>
metadata inputs 写法
<div class="cnblogs_code">
<pre>@Component({
inputs: [
{ name: 'boolValue', alias: 'value', required: true, transform: booleanAttribute }
]
})</pre>
</div>
取代了原本的 @Input，接口都一样，只是搬家而已。
我个人是觉得没有必要这么写啦，逻辑分开有时候也很乱，建议大家还是等 Signal-based Component 吧。
<h3>Signal-based 写法</h3>
<div class="cnblogs_code">
<pre>export class CardComponent {
title = input<string>();
}</pre>
</div>
上面这个就是 Signal-based Component Input 的写法。title 是属性，input 是全局函数。
这个写法和 DI 的 inject 函数非常相识。
Angular v17.1.0 正式推出了 Signal-based Input，想学可以看这篇 Signals # Signal-based Input。
 
<h2>Angular Component Lifecycle vs Custom Elements Lifecycle</h2>
<h3>Custom Elements Lifecycle</h3>
Custom Elements 有 3 个 Lifecycle Hook.
1. connectedCallback 当被 append to document
2. disconnectedCallback 当被 remove from document
3. attributeChangedCallback 当监听的 attributes add, remove, change value 的时候触发
<h3>Angular Component Lifecycle</h3>
Angular 有好多 Lifecycle Hook...我先介绍 5 个基本的，后面的章节还会介绍其它的。
首先，我们添加一些交互
一个 change attribute 和一个 remove element
<img src="https://img2023.cnblogs.com/blog/641294/202304/641294-20230407010542394-632652876.gif">
app.component.ts
<div class="cnblogs_code"><img src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_c663fb6f-0faf-45ec-8ef8-893b720e479a" class="cnblogs_code_hide">
<pre>export class AppComponent {
alert = alert;
websiteName = '兴杰 Blog';
showCookieAcknowledge = true;
}</pre>
</div>
View Code</div>
app.component.html
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_13a3a3c5-481b-4bbb-9151-b02695cb6855" class="cnblogs_code_hide">
<pre><div class="container">
<div class="action">
<button (click)="websiteName = 'Derrick\'s Blog'">Change Website Name</button>
<button (click)="showCookieAcknowledge = false">Delete Cookie Acknowledge</button>
</div>
@if (showCookieAcknowledge) {
<app-cookie-acknowledge ="websiteName" (acknowledge)=" alert($event)"></app-cookie-acknowledge>
}
</div></pre>
</div>
View Code</div>
不要在意 @if 和，后面章节会教，我们 focus Lifecycle Hook 就好了。
添加 5 个 Lifecycle Hook 到 Cookie Acknowledge Component
cookie-acknowledge.component.ts
<div class="cnblogs_code"><img class="code_img_closed lazyload" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img class="code_img_opened lazyload" style="display: none" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_9ce233e0-c373-49ba-9245-e0ce49f3eb8a" class="cnblogs_code_hide">
<pre>export class CookieAcknowledgeComponent
implements OnInit, OnChanges, OnDestroy, AfterViewInit
{
@Input({ required: true })
websiteName!: string;

@Output('acknowledge')
acknowledgeEmitter = new EventEmitter<string>();

constructor() {
console.log('constructor', '@Input value not ready yet');
console.log(
 'constructor, this.websiteName === undefined',
 this.websiteName === undefined
);
}

ngOnInit(): void {
console.log('OnInit', '@Input value ready');
console.log(
 'OnInit, this.websiteName !== undefined',
 this.websiteName !== undefined
);
}

ngOnChanges(changes: SimpleChanges): void {
if ('websiteName' in changes) {
 const change = changes['websiteName'];
 if (change.firstChange) {
 console.log(
 'OnChanges first change',
 `prev: ${change.previousValue}, curr: ${change.currentValue}`
 );
 console.log(
 'OnChanges first change, paragraph appended',
 document.querySelector('.paragraph') !== null
 );
 console.log(
 'OnChanges first change, paragraph data binding no complete yet',
 document.querySelector('.paragraph')!.textContent === ''
 );
 } else {
 console.log(
 'OnChanges second change',
 `previous value : ${change.previousValue}`
 );
 console.log(
 'OnChanges second change',
 `current value : ${change.currentValue}`
 );
 }
}
}

ngAfterViewInit(): void {
console.log(
 'AfterViewInit, paragraph data binding completed',
 document.querySelector('.paragraph')!.textContent !== ''
);
}

ngOnDestroy(): void {
console.log('OnDestroy', `element has been removed`);
console.log(
 'OnDestroy, query app-cookie-acknowledge === null',
 document.querySelector('app-cookie-acknowledge') === null
);
}
}</pre>
</div>
View Code</div>
不需要看 code, 下面我们看 runtime console 就可以了。
<h4>1. constructor</h4>
组件是 class，第一个被 call 的自然是 constructor。在这个阶段 @Input 的是还没有输入值的，它是 undefined。
template 也还没有 append 到 document 里。
<h4>2. ngOnChanges (first time)</h4>
ngOnChanges 对应 Custom Elements 的 attributeChangedCallback。每当 attribute 变化的时候就会 call。
websiteName 从开始的 undefined 变成 '兴杰 blog' 后就会触发 first time onchanges。
注：Custom Elements 的 attributeChangedCallback 是没有 first time call 的，它只有后续改变才会 call。
另外，template 在这个阶段已经 append to document 了，但如果有 binding data 的部分则还没有完成。
比如这句
<div class="cnblogs_code">
<pre><p class="paragraph">Welcome to {{ websiteName }}, to allow we track you, please press acknowledge button.</p></pre>
</div>
假如这个阶段我们 document.query .paragraph 会获得 element，但是 element.textContent 将会是 empty string。
<h4>3. ngOnInit</h4>
ngOnInit 对应 Custom Elements connectedCallback。在这个阶段 @Input 的 value 已经有值了。
通常我们会在这个阶段发 ajax 取 data 什么的。
这个阶段 binding data 依旧还没开始，paragraph.textContent 依然是 emtpty string。
<h4>4. ngAfterViewInit</h4>
这个阶段 binding data 就完成了。paragraph.textContent 已经有包括 websiteName '兴杰 blog' 在内的 text 了。
在这个阶段我们不应该再去修改 view model 了，如果修改它会报错的。
<img alt="" data-src="https://img2023.cnblogs.com/blog/641294/202304/641294-20230414134932970-992858144.png">
如果真的有需要修改的话，那么就用 setTimeout 让它开启下一个循环。
<h4>5. ngOnChanges（second time）</h4>
当 @Input 值被修改后，又会触发 ngOnChanges。记得，这个阶段 data binding 是还没有完成的哦。
如果想监听到 data binding 完成，可以使用 ngAfterViewChecked，但这个比较冷门，我不想在这里展开，以后的章节会详解介绍。
<h4>6. ngOnDestroy</h4>
ngOnDestroy 对应 Custom Elements 的 disconnectedCallback，这个阶段 element 已经从 document 移除了。
我们通常会在这里做一些释放资源的动作。
<h4>console 结果</h4>
<img src="https://img2023.cnblogs.com/blog/641294/202304/641294-20230407015150098-689302291.png">
 
<h2>Future (Signal-based Components)</h2>
参考: Github – Sub-RFC 3: Signal-based Components
这篇提到的 @Input @Output 还有 Lifecycle Hook 写法，在未来（一年后）会有很大的变化。
因为 Angular 正在向 React 学习，希望透过改变开放体验来吸引一些新用户。 
感受一下： 
@Input
<img src="https://img2023.cnblogs.com/blog/641294/202304/641294-20230407100616855-1943334088.png">
Angular v17.1.0 正式推出了 Input Signal，想学可以看这篇 Signals。
@Output
<img src="https://img2023.cnblogs.com/blog/641294/202304/641294-20230407100626838-858489814.png">
Lifecycle Hook
<img src="https://img2023.cnblogs.com/blog/641294/202304/641294-20230407100638528-1554471898.png">
改变的方向是尽可能移除 Decorator 和增加函数式特性，同时减少面向对象特性。
虽然写法上区别很大，但是底层思路改变的不多，而且 Angular 依然会保留目前的写法很长一度时间（maybe 2 more years）。
所以短期内大家还是可以学习和安心使用的。
 
 
<h2>目录</h2>
上一篇 Angular 20+ 高阶教程 – Component 组件の Angular Component vs Web Component
下一篇 Angular 20+ 高阶教程 – Component 组件の Angular Component vs Shadow DOM (CSS Isolation & slot)
想查看目录，请移步 Angular 20+ 高阶教程 – 目录
喜欢请点推荐👍，若发现教程内容以新版脱节请评论通知我。happy coding 😊💻
  
来源：https://www.cnblogs.com/keatkeat/p/17294252.html

頁: [1]

琼殿技术论坛's Archiver

Angular 20+ 高阶教程 – Component 组件 の Angular Components vs Custom Elements

Angular 20+ 高阶教程 – Component 组件の Angular Components vs Custom Elements