zoneless 中文文档教程

Question

这是实验性的

目的

该项目旨在使用 JavaScript 代理和 Angular 的新注入 函数获取组件的 ChangeDetectorRef 并在属性更改时发出通知。

因此，您可以从项目中删除 zone.js 并提高应用程序的性能和包大小。

使用

安装

只需使用npm安装即可：

npm install zoneless

导入并使用

import { useState } from 'zoneless';

@Component({
    selector: 'app-root',
    template: `
        <h1>Zoneless</h1>
        <p>Counter: {{ state.counter }}</p>
        <button (click)="increment()">Increment</button>
    `,
    })
})
export class AppComponent {
    state = useState({
        counter: 0,
    });

    increment() {
        this.state.counter++; // everything works as usual
    }
}

您需要进行更改才能删除zone.js

首先，您需要删除zone.js来自你的polyfills。从 Angular 15 开始，polyfills 使用 angular.json 中的属性加载：

"projects": {
    "my-project": {
        "architect": {
            "build": {
                "options": {
                    "polyfills": [
                        "zone.js" // remove this line
                    ]
                }
            }
        }
    }
}

并在 main.ts 中禁用使用 ngZone：

platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' })

就是这样，现在您有一个无区域应用程序！

计算属性

您还可以使用从现有状态派生的计算属性：

import { useState, computed } from 'zoneless';

@Component({
    selector: 'app-root',
    template: `
        <h1>Zoneless</h1>
        <p>Counter: {{ state.counter }}</p>
        <p>Counter * 2: {{ doubleCounter() }}</p>
        <button (click)="increment()">Increment</button>
    `,
    })
})
export class AppComponent {
    state = useState({
        counter: 0,
    });

    doubleCounter = computed(
        () => this.state.counter * 2,
        () => [this.state.counter],
    );

    increment() {
        this.state.counter++; // everything works as usual
    }
}

请注意两件事：

1. compulated 函数将一个函数作为第一个参数，该函数将被调用以获取以下值：计算的属性。
2. 然后它需要另一个函数，该函数返回依赖项数组。这些是要监视更改的属性。如果其中任何一个发生变化，计算属性将被重新计算。
3. 它本身返回一个函数，所以我们需要在模板中调用它来获取值。这是为了让 Angular 的变化检测真正知道值已经改变。如果依赖项没有改变，计算函数将不会。
4. 依赖数组实际上让我们依赖于其他几个状态。

使用 Observable -s

async 管道可能不再起作用，但是，您可以使用库提供的另一个函数，< code>useObservable：

import { useObservable } from 'zoneless';

@Component({
    selector: 'app-root',
    template: `
        <h1>Zoneless</h1>
        <p>Timer: {{ interval() }}</p>
    `,
    })
})
export class AppComponent {
    state = useObservable(interval(1_000));
}

所以我们不再需要async管道，但我们仍然可以使用Observable-s。

请注意，useObservable 函数返回一个函数，因此您需要调用它来获取值。这是为了让 Angular 的变化检测真正知道值已经改变。

当组件被销毁时，useObservable 函数还会自动取消订阅 Observable。

已知问题：

目前尚未报告任何问题，但这是实验性的，因此使用风险自负。

贡献

欢迎任何贡献，无论是评论、开放问题、公关还是其他任何内容。如前所述，这是实验性的，因此欢迎任何反馈。目的是进一步实验并看看它是否可以在生产中使用。