Question

首先，这是我想要完成的事情：

我们说我有一个包含js Date对象的帖子的模型。现在，我想以自定义的，人类可读的格式呈现日期，而不显示日期和时间，而是从现在开始的偏移（即＃34;刚刚＃34;，＆＃34;约一小时以前＆＃34;，＆＃34;大约两个小时前＆＃34;等。）。

我是TypeScript和angular2的新手，但从我到目前为止所读到的，最优雅的方法是使用这样的自定义管道：

@Pipe({name: 'hrTime'})
export class HrTimePipe implements PipeTransform {

    constructor(private translate: TranslateService) {

    }

    transform(val: Date): string {

        // Roughly check if that date is about one hour ago
        let now: Date = new Date();
        now.setMinutes(now.getMinutes() - 90);
        if (val > now) {
            return this.translate.instant("about_1_h_ago");
        }
    }
}

此方法存在的问题是TranslateService的instant()方法无法确保在构建或使用此管道时加载转换文件。因此，我的自定义管道目前只返回我的翻译键（因为instant()找不到我的翻译）。

对于较大的时间间隔（即超过一天前），我的管道应该在内部使用日期格式管道，因此返回必须通过管道传输到translate的翻译密钥并不是一个真正的选项

你有什么建议吗？使用自定义管道是我想要完成的正确方法吗？

谢谢！

Answer 1

你可以把它变成一个不纯的管道并返回一个Observable。这样，您可以将管道链接到#import <UIKit/UIKit.h> #import "LocateViewController.h" #import <MessageUI/MessageUI.h> #import "AppDelegate.h" #import "MBProgressHUD.h" #import "constant.h" @interface AcceptJobViewController : UIViewController<MFMessageComposeViewControllerDelegate,UIAlertViewDelegate,CLLocationManagerDelegate,MBProgressHUDDelegate,UITextFieldDelegate,UITableViewDataSource,UITableViewDelegate,UIPickerViewDataSource,UIPickerViewDelegate> { NSDictionary *dictionary; AppDelegate *appDelegate; IBOutlet UIImageView *whiteBgView; IBOutlet UIScrollView *scrlView; MBProgressHUD *HUD; BOOL isClicked1; UIPickerView *pktStatePicker ; UIToolbar *mypickerToolbar; IBOutlet UIButton *vacantBtn; UITableView *btnwttime; NSString *StatusStrnig; IBOutlet UIButton *btn_telephone,*btn_call,*btn_equry,*btn_thanks,*btn_inform,*btn_navigate1,*btn_navigat2e2,*btn_navigate3 ,*btn_navigate4,*btn_navigate5,*btn_navigate6,*btn_complete,*btn_Cancel,*btn_route,*btn_noshow; IBOutlet UITextField *txtFare; int dispatch; NSMutableArray *arrList; NSArray *wt_array; } @property(nonatomic, strong, readwrite) NSString *environment; @property(nonatomic, strong, readwrite) NSString *resultText; @property (retain, nonatomic) IBOutlet UIView *subView; @property (retain, nonatomic) IBOutlet UIButton *close; @property (nonatomic,retain) CLLocationManager *lm; @property(nonatomic,retain)NSMutableDictionary *passedArrray; -(IBAction)backBtnClick:(id)sender; -(IBAction)homeBtnClick:(id)sender; -(IBAction)callClick:(id)sender; -(IBAction)telephoneClick:(id)sender; -(IBAction)msgClick:(id)sender; -(IBAction)navigateAClick:(id)sender; -(IBAction)navigateBClick:(id)sender; -(IBAction)navigateCClick:(id)sender; //-(IBAction)jobCompleteClick:(id)sender; -(IBAction)jobCancelClick:(id)sender; -(IBAction)btn_make_payment:(id)sender; -(IBAction)btn_thanks_sms:(id)sender; -(IBAction)btn_enquire_sms:(id)sender; //-(IBAction)Vacant:(id)sender; @end管道并使其无缝工作。

那样你会想到三种情景： - 时间差很大：立即解决日期问题 - 时间差很小，翻译已经加载：立即翻译和解决 - 时间差很小，翻译尚未准备好：等待翻译文件加载，然后用正确的翻译解决

Answer 2

如果你不关心有一个外部依赖，为什么不使用时刻管道，你有这个工具角2 https://github.com/urish/angular2-moment

使用翻译的自定义angular2日期格式管道

2 个答案: