Question

我正在重组一个我发现以下功能的有角度的项目。

在app.component.ts文件中

ngOnInit() {
this.portfolioID = Number(sessionStorage.getItem('portfolioID'));
console.log(this.portfolioID);
this.sharedService.getPortfilioID().subscribe(portfolioID => {
  if (portfolioID && portfolioID !== 0) {
    this.items.forEach(item => {
      if (item.displayText === 'Business Licenses' && item.items.length > 0) {
        item.items.forEach(childItem => {
          childItem.url = childItem.defaultUrl;
        });
      }
    });
  }
});
}

他们正在从本地存储中获取一些ID，该ID是通过单击另一个组件中的链接来设置的。

Another.component.html

<ng-template kendoGridCellTemplate let-dataItem *ngIf="column.isActionable && titleName == 'Customer Search'">
    <a href="javascript:void(0)" *ngIf="column.attributeName == 'portfolioName'"
      (click)="viewPortfolioDetails(dataItem.portfolioID)">{{dataItem.portfolioName}}</a>
  </ng-template>

Another.component.ts

viewPortfolioDetails(portfolioID: number) {
sessionStorage.setItem('portfolioID', portfolioID.toString());
this.sharedService.setPortfolioID(portfolioID);
}

因此，由于它是在点击时设置的，因此最初是在页面首次在点击之前加载时，我无法获取ID，因此后续功能无法正常工作。所以，我的问题是我可以再次调用app.component的onInit（）方法吗？还是有更好的方法来做到这一点。谢谢。

Answer 1

请使用以下链接Javascript - telling setInterval to only fire x amount of times?

在这里您可以使用oninit()

来写setintervalX()的内容

这样，您可以多次调用oninit的内容

Answer 2

您不必打两次ngOnInit()。只要将childItem.url正确地推送到共享服务中的可观察对象中，变量portfolioID就将在应用程序组件中设置。您可以在服务中尝试以下操作

共享服务

import { Subject } from 'rxjs';

@Injectable()
export class SharedService {
  private portfolioIdSource = new Subject<number>();
  private portfolioId$ = this.portfolioIdSource.asObservable();

  public setPortfolioID(portfolioID: number) {
    this.portfolioIdSource.next(portfolioID);
  }

  public getPortfilioID(): Observable<number> {
    return this.portfolioId$;
  }
}

还要确保从会话存储中获取的值在应用程序生命周期的开始就被使用。

应用程序组件

subscription: any;

ngOnInit() {
  const portfolioID = sessionStorage.getItem('portfolioID');    // <-- will be called only once at the beginning of app life-cycle
  if (portfolioID !== null && Number(portfolioID) !== 0) {
    this.setUrl();
  }

  this.subscription = this.sharedService.getPortfilioID().subscribe(    // <-- will be triggered everytime new portfolioID is pushed
    portfolioID => {
      if (portfolioID && portfolioID !== 0) {           // <-- will not be called at app beginning because no value in observable 
        this.setUrl();
      }
    }
  );
}

setUrl() {
  this.items.forEach(item => {
    if (item.displayText === 'Business Licenses' && item.items.length > 0) {
      item.items.forEach(childItem => {
        childItem.url = childItem.defaultUrl;
      });
    }
  });
}

ngOnDestroy() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

单击链接第二次调用应用程序组件ngOnInit（）

2 个答案: