要在Angular 7中在@Input属性中保留原始列表,可以使用一些技巧和辅助变量来实现。下面是一个示例代码:
在父组件中,首先定义一个原始列表的变量,并将其传递给子组件:
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent {
originalList = ['Item 1', 'Item 2', 'Item 3'];
}
然后,在子组件中,使用@Input装饰器来接收父组件传递的列表,并在组件内部创建一个辅助变量来保留原始列表:
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template: `
- {{ item }}
`
})
export class ChildComponent implements OnInit {
@Input() list: string[];
originalList: string[];
ngOnInit() {
this.originalList = [...this.list]; // 使用扩展运算符创建原始列表的副本
}
}
在子组件中,我们使用ngOnInit生命周期钩子来初始化originalList变量。这里我们使用扩展运算符(...)来创建原始列表的副本,以避免直接引用父组件的列表。
通过这种方法,我们可以在子组件中保留原始列表,并使用originalList变量进行操作,而不会影响到父组件的列表。
希望这个例子能帮助到你!