这段代码按年龄过滤用户，并返回一个超过 18 岁的姓名数组。但是“ functions.reduceRight((arg, fn) => fn(arg), args) ”行到底是做什么的呢？
const compose = (...functions) =>
args => functions.reduceRight((arg, fn) => fn(arg), args);
compose(map(u => u.name), filter(u => u.age >= 18))
你能告诉我这是怎么做到的吗？我想将指令应用于模板中的必要块，它将根据值显示/隐藏 div，例如 *ifViewportSize="'mobile'" （理想情况下）。
<div *ifViewportSize="'large'">PC</div>
<div *ifViewportSize="'small'">Mobile</div>指令：（控制台结果）https://stackblitz.com/edit/angular-ivy-wdl8ee
@Directive({
selector: '[ifViewportSize]'
})
export class IfViewportSizeDirective {
size: string;
config = {
large: 992,
medium: 768,
small: 576
};
constructor(
private elemRef: ElementRef,
private vcRef: ViewContainerRef,
private templRef: TemplateRef<any>) {
window.onresize = (event) => {
this.showElem();
};
}
@Input() set ifViewportSize(size: string) {
this.size = size;
}
ngOnInit() {
this.showElem();
}
showElem() {
console.log('size: ',this.size);
if (this.config[this.size] < window.innerWidth) {
this.vcRef.clear();
this.vcRef.createEmbeddedView(this.templRef);
}
else this.vcRef.clear();
}
}
结果，由于某种原因，该指令仅应用于最后一个 div。请告诉我这是为什么？
我还尝试（在同一个 stackblitz 项目中）创建单独的 ifMobile 和 ifTablet 指令。他们启动了 window.onresize 函数，但同样只有最后一个 div 上的指令有效。
我不明白为什么会出现这种行为。可以修吗？如果这种方式是错误的（根据屏幕大小在屏幕上显示某些块），那么如何以不同的方式完成呢？
在主文件夹中有一个 TestComponent 组件，我试图从共享文件夹中调用 profileComponent 组件。如果这些文件夹有自己的组件模块，我该如何正确执行此操作？
https://stackblitz.com/edit/stackoverflow-separated-modules-howto
Kst代码：
<div *ngFor="let item of items()">some item</div>
items() {
console.log(Array.from(Array(10).keys()));
return Array.from(Array(10).keys());
}
Console.log 出于某种原因在控制台中多次显示该数组。 https://stackblitz.com/edit/angular-lstpcw
在下面描述的情况下，我无法弄清楚如何最好地拆分 scss。
假设我有一个可重复使用的“产品”组件（由产品名称、图像、价格、迷你描述等组成）。它经常出现在不同的页面上，而且到处都有不同的风格。例如，在第一个位置有一个字体大小，图像大小（和一堆其他不同的样式），在第二个位置 - 另一个，在第三个 - 第三个。
为这 3 种情况分别注册 scss 的正确性（以及在何处）？
在product.component.scss本身，原来我只能写通用样式。我不想在通用 style.css 文件中将所有内容与其他样式一起编写。在资产中创建一个单独的目录（如 product.scss）？那么编写样式的最佳方法是什么？像这样（下）？
.Такой-то компонент1{
Продукт {...}
}
.Такой-то компонент2{
Продукт {...}
}
...
问题 #2：假设我有一个“listOfProducts”组件和一个子“产品”——如何在父 scss 中为子级设置样式？我的父scss没有看到子，还要在assets里单独做一个文件，里面还有长长的样式表，因为网站不同地方都有这样的父子listOfProducts，视觉上不一样.
你能推荐一个正确结构的例子，或者如何正确地做吗？提前感谢您的回复。
我不明白在父组件中如何影响自定义组件中复选框的状态，即 取消选中自定义复选框：
https://stackblitz.com/edit/uncheck-checkboxes-in-form-by-click-on-button
下面的代码 ( https://stackblitz.com/edit/angular-ivy-s3ixx8 ) 工作，保存到本地存储，并显示其中的所有数据（产品数量）。
问题是这样的：当我重新加载页面时，我无法编辑这些数据。也就是说，当我点击“+”或“-”，然后我提交时，商品数量仍然保持不变。
app.component.ts：
form: FormGroup;
productsFormArray: FormArray;
localStorageData = [];
constructor() {
this.form = new FormGroup({
products: new FormArray([])
})
this.productsFormArray = this.form.get('products') as FormArray;
// get data from localStorage
this.localStorageData = JSON.parse(localStorage.getItem('dataSource'));
// if localStorage is not empty
if (this.localStorageData != null) {
console.log(this.localStorageData);
this.localStorageData.map((x, i) =>
this.productsFormArray.controls.push(new FormControl(x)));
}
}
// add new product
add() {
(this.form.get('products') as FormArray).push(new FormControl(0));
}
// count quantity of product
count(n: number, i: number) {
var value = this.productsFormArray.at(i).value;
value += n;
this.productsFormArray.at(i).setValue(value);
}
onSubmit() {
console.log(this.form.value);
}
saveToLocalStorage() {
localStorage.setItem('dataSource',
JSON.stringify(this.form.value.products));
}
