从angular 15到19 一些新的写法

表单

Angular 18中公开一个名为 events 的属性，它允许您订阅事件流对于这个表单控件，并且对从它继承的所有类都可用：FormControl, FormGroup, FormRecord和FormArray。使用它您可以跟踪值、触摸状态、原始状态和控制状态的变化。
下面定义了FormControl，让我们一起看看吧：

name = new FormControl<string>("");

ngOnInit(): void {
    this.name.events.subscribe(event => {
      console.log(event);
    });
  }

// html 
输入：<input type="text" [formControl]="name" />

当输入值的时候，可以看到控制台中打印了三个事件：

当 “光标离开的时候” 又打印了一个事件：

当再次输入只会触发两个事件：

共同点：都是两个属性，第一个取决于事件类型，并包含控件值或的控件的状态值，第二个source。它指向发出事件的对象。

• PristineChangeEvent - 在首次更改控件值时触发，无论控件是否具有初始值。
• ValueChangeEvent - 类似于 （老式;)）valueChange事件。它提供控件的当前值。默认情况下，每当控件的值发生更改时，都会触发它。
• StatusChangeEvent - 类似于statusChanges.它提供当前的验证状态。每次更改控件的值时都会触发，无论控件是否分配了验证器。如果控件分配了异步验证程序，则StatusChangeEvent将发出两次。一次，当 status 属性设置为PENDING，则当验证器返回验证结果时，将第二次返回验证结果。
• TouchedChangeEvent - 当用户首次与控件交互时触发。通常，当用户模糊控件时，即使该值没有更改，也会触发它。

等后续用到该功能时，在详细出一篇关于event使用。

input

在15版本中，当我们子组件需要传值的的时候：通常使用的是@Input属性来实现：
value类型是一个 number

使用：

//子组件定义
@Input() value = 0;

// 子组件显示值
<p>input {{value}}</p>

//父组件中引入子组件进行传值
<app-input [value]=100></app-input>

在19版本中可以这样使用：

在源码中可以看到：InputSignal是范型，我们可以随意指定类型。默认值是undefined。

使用：

//子组件定义
value = input<number>();

// 子组件显示值
<p>input {{value()}}</p>

// 父组件中引入子组件进行传值
<app-input [value]=100></app-input>

value是一个InputSignal，可以通过调用 signal 来读取该值

ngOnInit(): void {
    this.label();
  }
// 创建computed 读取值，返回的是Signal
label = computed(() => {
        console.log('读取', this.value())
    });

还可以设置,必需输入:required

  value = input.required<number>();

父组件必须给子组件值，不然会报错：

当然，还有更多功能：

• Input transforms：输入转换
• Type checking： 类型检查
• Input aliases： 设置别名
• Model inputs：模型输入
• 等

上面只是冰山一角，期待你的发现。

更多更详细的使用，请参考：https://next.angular.dev/guide/components/inputs

Output

当需要给父组件弹值的时候，在15中我们通常这么使用：

@Output() panelClosed = new EventEmitter<void>();

在18、19中我们可以像input一样 这么使用，并且官方也推荐我们这么使用：

output function 完全支持@Output API

panelClosed = output<void>();

从源码中可以看到返回的是：OutputEmitterRef，也可以声明类型。

打包目录也有所该变

好像在 angular17开始Vite 和 esbuild 来取代以前的 webpack 进行打包了。

当你需要部署你的项目时候，请注意打包后的结构目录也有所不用。

图下是15打包的结构目录：

图下是18打包后的结构目录：

从图中可以看到单独拿出来了3rdpartylicenses.txt，并且打包后的文件都放在了browser文件夹下。猜测为了更好的支持浏览器兼容性吧。

图下是19打包后的结构目录：相比18，多了prerendered-routes.json这个文件，不知道具体作用，看文件名猜测用来存储已渲染的路由列表吧。

友情链接

这篇是angular工作人员接受了关于19的一些更改 Meet Angular v19，Angular v18 is now available!
官方文档

下面是我们团队学习angular19和18的一些理解：
手把手带你初始化一个angular库
angular 19 学习记录
Angular Signal的简单学习
angular 新语法糖学习一