Question

在角度上，我正在使用服务来获取页面的当前位置，并相应地更改页面标题，为此，我正在使用正常运行的 async 函数在按下按钮但加载页面并且在ngOnInit中无法按顺序工作的情况下。

async getPageName(): Promise < any > {

    await this.router.events.subscribe(event => {

        if (event instanceof NavigationEnd) {
            console.log("url ", event.url);
            var index = this.pageNameHeader.findIndex(function(page) {
                return page.location == event.url.replace("/", "");
            })
            this.pageName = this.pageNameHeader[index].name
        }
    });
    console.log(this.pageName, " initialize");

    return this.pageName;
}

控制器

  this.commonService.getPageName().then(data=>{
  this.pageName = data
})

在通常情况下，第二个日志按顺序出现，但在ngOnInit中是第一个。我不在这里使用observable返回数据，因为在event.subscribe完成之前，{{1} }函数返回一个空字符串，即旧数据。

Answer 1

重写以使用正确的承诺应该会有所帮助

getPageName(): Promise <any> {
    return new Promise((resolve, reject) => {
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                console.log("url ", event.url);
                var index = this.pageNameHeader.findIndex(function(page) {
                    return page.location == location.pathname.replace("/", "");
                });
                if (index) {
                    resolve(this.pageNameHeader[index].name);
                } else { 
                    reject();
                }
            }
        });
    });
}

那你就可以做

async ngOnInit() {
  this.pageName = await this.getPageName();
}

Answer 2

您正在等待Subscription对象，它既不是Promise也不是类似Promise的东西。

您可以使用Observable方法将Promise转换为toPromise：

const event = await this.router.events.toPromise();
if (event instanceof NavigationEnd) {
// etc

Answer 3

await关键字仅在Promise对象上起作用，但是this.router.events.subscribe()表达式返回一个Subscription对象。

您应该尝试使用toPromise()的可观察对象方法：

async getPageName(): Promise < any > {
    await this.router.events.toPromise().then(event => {
        if (event instanceof NavigationEnd) {
            console.log("url ", event.url);
            var index = this.pageNameHeader.findIndex(function(page) {
                return page.location == location.pathname.replace("/", "");
            });
            this.pageName = this.pageNameHeader[index].name
        }
    });
    console.log(this.pageName, " initialize");
    return this.pageName;
}

在ngOnInit中调用时，异步功能不起作用

3 个答案: