只执行一次指令/函数

Question

我有一个像这样在离子列表中传递的指令：

<ion-item-sliding [animateItemSliding]="shouldAnimate" </ion-item>

基本上它是一个自定义指令，它只是应用转换动画的 css 规则，其作用类似于滑动，并返回到正常状态。 我通过设置 shouldAnimate 布尔值来执行它

export class PageName {

shouldAnimate: boolean; ... }

ionViewDidLoad() {
    this.shouldAnimate = true;
};

ionViewWillLeave() {  
    this.shouldAnimate = false;
};

这通过使用生命周期事件暂时有效。但是，如果再次生成页面，它仍然会将 shouldAnimate 设置为 true。

我希望能够找到仅执行指令的方法，并且仅在您第一次打开此页面时。 所以，这个变量的布尔值应该只有在你第一次打开这个页面时才为真，然后记住这个选择（将布尔值设置为 false）并且永远不要再次执行它（或者可能直到你关闭应用程序并再次从手机完全加载）

Answer 1

它不能按照你想要的方式完成。一旦组件被销毁并再次创建，它就无法知道它之前已经创建过。您需要在某处跨组件的不同实例保持状态。 Angular 的实现方式是服务。

创建一个服务来存储这些数据。

@Injectable()
export class MyService {
  shouldAnimate = false
}

在某处提供它，例如在您的AppModule 中。将此添加到元数据中（传递给 @NgModel 的对象）。

providers: [MyService],

现在在组件中注入此服务的单例。

export class PageName {
  constructor(private myService: MyService) {}
}

现在只需翻转变量一次，如果尚未翻转的话。这最好在 OnInit 生命周期挂钩中完成。

ngOnInit() {
  if (!this.myService.shouldAnimate) {
    this.myService.shouldAnimate = true
  }
}

您的PageName 组件现在可能会被销毁无数次，但服务将继续存在，这意味着您想要的数据将在组件的创建和销毁过程中持续存在。