哈Ha！今天，我想谈谈使用Angular时正确代码的主题。 这些建议将使您的代码在实践中更有效，并使我对初级代码的要求降低。
1.避免模式中的逻辑
我首先要提到的是模板中的逻辑。 如果模板中有某种逻辑，即使它是简单的&&，也可以将其提取到组件中。 模板中逻辑的存在意味着无法对其进行测试，因此更改模板代码时更容易出错。
<p *ngIf="isShow"> Example </p>
public ngOnInit(): void { this.isShow = true; }
2.“安全”行
假设您有一个字符串类型的变量，它只能具有一组特定的值。 无需将其声明为字符串类型，而是可以将此可能值的列表声明为类型。
private value: 'One' | 'Two'; if (isShow) { value = 'One'; } else { value = 'Two' }
通过这样声明变量的类型，我们可以避免在编译时而不是在运行时编写代码时出错。
3.长方法的规则
这里的代码演示是多余的。 重要的是要了解没有人喜欢长方法。
长方法通常表明它们做太多事情。 也许该方法本身可以做一件事，但是在其中内部，可以追求其逻辑目的，可以将其他几种操作置于自己的另一种方法中。 长方法很难阅读，理解和维护。 它们也容易出错，因为更改一件事可能会影响此方法中的许多其他事情。 我敢肯定，这样的方法使重构（这是任何应用程序的关键）变得比原来更困难，而不仅仅是我一个人。
4.代码重复
如果您的代码在项目中的不同位置重复。 将重复代码提取到一个单独的方法中，并使用它代替重复代码。
代码重复的问题是，如果我们要更改此代码的逻辑，则必须在几个地方进行。 这使代码维护变得困难，进而增加了错误弹出的风险。 更改逻辑也需要更多时间。 使用更少的重复代码，应用程序将更快。
5. trackBy
让我们淡化使用Angular的细微清单。
ngFor通常使用它在模板中的数组上进行迭代，但在实践中通常不使用trackBy这样的功能。 在ngFor中使用它。 由于有了这样的琐事，您将为每个元素收到一个唯一的标识符。
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
trackByFn(index, item) { return item.id;
当数组更改时，Angular重新显示整个DOM树。 但是，如果您使用trackBy，则Angular将知道哪个元素已更改，并且只会更改该特定元素的DOM。
6.订阅模板
请注意订阅观察到的组件的示例：
<p>{{ text }}</p>
blablaObservable .pipe( map(value => value.item), takeUntil(this._destroyed$) ) .subscribe(item => this.text = item);
现在您已经了解了如何不这样做。 我并不是在敦促您严格遵循我的建议，而只是开发人员通常不会深入研究其代码中正在发生的事情。 那么，为什么不好，怎么做得好呢？ 事实是，我们冒着意外取消订阅组件中预订的风险，这可能导致内存泄漏。 最好的选择是在模板本身中使用预订：
<p>{{ text$ | async }}</p>
this.text$ = blablaObservable .pipe( map(value => value.item) );
多亏了async，我们不必担心取消订阅，因为它可以自动取消订阅，并且简化了代码，无需手动管理订阅。 它还减少了意外取消订阅我上面提到的组件的风险。
7.延迟加载
尽可能在Angular应用程序中使用延迟模块加载。 延迟加载是指仅在使用某些东西时才下载它，例如，仅在需要查看它时才加载组件。 这将减小可下载应用程序的大小，并可以缩短应用程序的加载时间，而无需加载未使用的模块。
// app.routing.ts
{ path: 'dashboard', loadChildren: 'lazy-load.module#DashboardModule' }
8.订阅内的订阅
有时，您可能需要多个观察值来完成一项操作。 在这种情况下，请避免在另一个可观察项的订阅块中订阅一个可观察项。 而是使用适当的链接运算符。 链语句在它们前面的可观察对象上运行。 一些连锁经营者，例如withLatestFrom，combinateLatest等...
至：
oneObservable$.pipe( take(1) ) .subscribe(oneValue => { twoObservable$.pipe( take(1) ) .subscribe(twoValue => { console.log([oneValue, twoValue].join(', ')); }); });
之后：
oneObservable$.pipe( withLatestFrom(twoObservable$), first() ) .subscribe(([oneValue, twoValue]) => { console.log([oneValue, twoValue].join(', ')); });
9.缓存
向API发出请求时，其中一些响应通常不会改变。 在这些情况下，您可以添加缓存机制并保存API中的值。 当请求应重复相同的API时，请检查其在缓存中是否有值，如果有，请使用它。 否则，请进行API调用并缓存结果。 如有必要，您可以输入缓存时间，在此可以检查上次缓存时间，并决定是否调用API。 具有缓存机制可避免不必要的API请求。 由于避免了重复请求，因此提高了应用程序速度，因为我们不需要等待响应，从而一次又一次地下载相同的信息。
10.粉碎成可重用的组件
将大型组件分成较小的组件。 简化此类组件并使它们尽可能地笨拙，因为这将使它们在更多场景下工作。 创建这样的组件意味着该组件本身没有任何特殊的逻辑，并且仅基于提供给它的输入和输出来工作。 通常，组件树中的最后一个后代将是最简单的。 这是基于此类组件的易用性来完成的，此类组件不太可能出现错误。 可重用的组件还减少了代码重复，这使得维护和更改变得更加容易。
您要继续这样的专栏吗？